2D Transform trong CSS

(9)
128 lượt xem
Share

CSS 2D Transforms là những thuộc tính dùng để xử lý hiệu ứng di chuyển 2D (không gian hai chiều), ví dụ bạn có thể dụng CSS để quay một thẻ HTML một góc 180 độ, hay kéo nhỏ kéo to khi hover chuột vào đối tượng HTML, .. Thì tất cả những hiệu ứng như vậy trong không gian hai chiều ta gọi là 2D Transforms. Để hiểu rõ hơn về 2D Transform, mời bạn đọc cùng eLib.VN tham khảo bài viết dưới đây.

Mục lục nội dung

2D Transform trong CSS

1. 2D Transforms trong CSS

2D Transforms được sử dụng để tái thay đổi cấu trúc phần tử, ví dụ như translate, rotate, scale, và skew.

Bảng dưới liệt kê một số giá trị thường được sử dụng trong 2D Transforms:

Giá trị Miêu tả
matrix(n,n,n,n,n,n) Được sử dụng để định nghĩa Matrix Transforms (dạng tịnh tiến theo ma trận) với 6 giá trị
translate(x,y) Được sử dụng để tịnh tiến phần tử theo trục x và trục y
translateX(n) Được sử dụng để tịnh tiến phần tử theo trục x
translateY(n) Được sử dụng để tịnh tiến phần tử theo trục y
scale(x,y) Được sử dụng để thay đổi độ rộng và chiều cao của phần tử
scaleX(n) Được sử dụng để thay đổi độ rộng của phần tử
scaleY(n) Được sử dụng để thay đổi chiều cao của phần tử
rotate(angle) Được sử dụng để quay phần tử dựa trên một góc (angle)
skewX(angle) Được sử dụng để định nghĩa Skew Transforms (dạng tịnh tiến đối xứng lệch) cùng với trục x
skewY(angle) Được sử dụng để định nghĩa Skew Transforms cùng với trục y

Dưới đây là các ví dụ minh họa cách sử dụng của các thuộc tính trên.

2. Quay 20 độ góc - rotate(20deg) trong CSS

Trong ví dụ sau, một hộp sẽ quay theo một góc 20 độ:

<html>
   <head>
   
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(20deg);
            
            /* Safari */
            -webkit-transform: rotate(20deg);
            
            /* Cu phap chuan */
            transform: rotate(20deg);
         }
      </style>
      
   </head>
   <body>
      <div>
      Vi du 2D Transform trong CSS.
      </div>
      
      <div id="myDiv">
      Vi du 2D Transform trong CSS
      </div>
   </body>
</html>

Kết quả là:

3. Quay -20 độ góc - rotate(-20deg) trong CSS

Trong ví dụ sau, một hộp sẽ quay theo một góc -20 độ:

<html>
   <head>
   
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            /* IE 9 */
            -ms-transform: rotate(-20deg); 
         
            /* Safari */
            -webkit-transform: rotate(-20deg);
         
            /* Cu phap chuan */	
            transform: rotate(-20deg);
         }
      </style>
      
   </head>
   <body>
      <div>
      Vi du 2D Transform trong CSS.
      </div>
      
      <div id="myDiv">
      Vi du 2D Transform trong CSS
      </div>
   </body>
</html>

Kết quả là:

4. Đối xứng lệch theo trục x – skewX(20deg) trong CSS

Trong ví dụ sau, một hộp sẽ đối xứng lệch theo trục x:

<html>
   <head>
   
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewX(20deg); 
            
            /* Safari */
            -webkit-transform: skewX(20deg);
            
            /* Cu phap chuan */	
            transform: skewX(20deg);
         }
      </style>
      
   </head>
   <body>
      <div>
      Vi du 2D Transform trong CSS.
      </div>
      
      <div id="skewDiv">
      Vi du 2D Transform trong CSS
      </div>
   </body>
</html>

Kết quả là:

5. Đối xứng lệch theo trục y – skewY(20deg) trong CSS

Trong ví dụ sau, một hộp sẽ đối xứng lệch theo trục x:

<html>
   <head>
   
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#skewDiv {
            /* IE 9 */
            -ms-transform: skewY(20deg); 
            
            /* Safari */
            -webkit-transform: skewY(20deg); 
            
            /* Cu phap chuan */	
            transform: skewY(20deg);
         }
      </style>
      
   </head>
   <body>
      <div>
      Vi du 2D Transform trong CSS.
      </div>
      
      <div id="skewDiv">
      Vi du 2D Transform trong CSS
      </div>
   </body>
</html>

Kết quả là:

6. Matrix Transform trong CSS

Ví dụ sau minh họa cách sử dụng của Matrix Transfrom trong CSS:

<html>
   <head>
   
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv1 {
            /* IE 9 */
            -ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
            
            /* Safari */
            -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); 
            
            /* Cu phap chuan */
            transform: matrix(1, -0.3, 0, 1, 0, 0); 
         }
      </style>
      
   </head>
   <body>
      <div>
      Vi du 2D Transform trong CSS.
      </div>
      
      <div id="myDiv1">
      Vi du 2D Transform trong CSS
      </div>
   </body>
</html>

Kết quả là:

Ví dụ Matrix Transform theo một hướng khác:

<html>
   <head>
   
      <style>
         div {
            width: 300px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv2 {
            /* IE 9 */
            -ms-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Safari */	
            -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
            
            /* Cu phap chuan */
            transform: matrix(1, 0, 0.5, 1, 150, 0); 
         }
      </style>
      
   </head>
   <body>
      <div>
      Vi du 2D Transform trong CSS.
      </div>
      
      <div id="myDiv2">
      Vi du 2D Transform trong CSS
      </div>
   </body>
</html>

Kết quả là:

Trên đây là bài viết của eLib.VN về 2D Transform trong CSS. Bài viết chỉ mang tính chất giới thiệu để bạn hiểu ý nghĩa của từng thuộc tính nên mình không cho nhiều ví dụ. Hy vọng bài viết hữu ích cho bạn đọc.

(9)
128 lượt xem
Share
Ngày:11/11/2020 Chia sẻ bởi:Hoang Oanh Nguyen
TẢI VỀ XEM ONLINE

CÓ THỂ BẠN QUAN TÂM