2D Transform trong CSS3

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ả translate(x,y) Được sử dụng để tịnh tiến phần tử theo trục x và trục y ...

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ả
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.

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 {
            awidth: 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à:

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 {
            awidth: 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à:

Đố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 {
            awidth: 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à:

Đố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 {
            awidth: 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à:

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 {
            awidth: 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 {
            awidth: 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à:−

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại code24h.com:

Bài liên quan

2D Transform trong CSS3

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ả translate(x,y) Được sử dụng để tịnh tiến phần tử theo trục x và trục y ...

Hoàng Hải Đăng viết 12:36 ngày 14/08/2018

Web Font trong CSS3

Web Font trong CSS3 cho phép lập trình viên có thể sử dụng các font mà không được cài đặt trên máy tính của người dùng. Khi bạn đã mua/tìm được font bạn muốn, bạn chỉ cần include font file này trên Web Server, và sau đó nó sẽ được tự động tải tới người dùng khi cần thiết. Các font riêng của ...

Hoàng Hải Đăng viết 12:32 ngày 14/08/2018

Tạo hiệu ứng cho Text trong CSS3

CSS3 bổ sung thêm một số tính năng giúp bạn tạo hiệu ứng cho text: Bảng dưới liệt kê một số thuộc tính thường được sử dụng trong CSS3: Giá trị Miêu tả text-align-last Căn chỉnh dòng văn bản cuối cùng text-emphasis Được sử dụng để nhấn mạnh phần văn bản nào đó ...

Hoàng Hải Đăng viết 12:29 ngày 14/08/2018

Sử dụng calc() trong CSS3

Chào các bạn, Trong bài này tôi sẽ giới thiệu về calc() trong CSS3 Như chúng ta đã biết thì từ CSS3, chúng ta đã có hàm calc() cho phép chúng ta thực hiện các phép toán học ngay trong thuộc tính(property). Thay vì khai báo các giá trị pixel tĩnh cho các độ rộng (awidth) của element, chúng ta ...

Hoàng Hải Đăng viết 17:29 ngày 12/08/2018

Hiểu biết thêm về Animation trong CSS3

CSS animation là công nghệ được giới thiệu trong phiên bản CSS3. Nó cho phép chúng ta tạo hiệu ứng chuyển động mà không phải sử dụng Javascript hay Flash. Trong bài học này bạn sẽ tìm hiểu cách tạo chuyển động thẳng và quay vòng đồng thời cho một thẻ div nhờ sử dụng HTML5 và CSS3. Một số thuộc ...

Hoàng Hải Đăng viết 16:04 ngày 12/08/2018
0