3D Transform trong CSS

Sử dụng 3D Transform trong CSS, bạn có thể di chuyển các phần tử theo 3 trục: x, y và z. Dưới đây là các ví dụ xác định một cách rõ ràng cách phần tử sẽ quay theo các trục. Các phương thức của 3D Transform trong CSS Bảng dưới liệt kê các phương thức được sử dụng để gọi 3D Transform trong ...

Sử dụng 3D Transform trong CSS, bạn có thể di chuyển các phần tử theo 3 trục: x, y và z. Dưới đây là các ví dụ xác định một cách rõ ràng cách phần tử sẽ quay theo các trục.

Các phương thức của 3D Transform trong CSS

Bảng dưới liệt kê các phương thức được sử dụng để gọi 3D Transform trong CSS:

Giá trị Miêu tả
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Được sử dụng để tịnh tiến phần tử bởi sử dụng 16 giá trị của một ma trận
translate3d(x,y,z) Được sử dụng để tịnh tiến phần tử theo trục x, trục y và trục z
translateX(x) Được sử dụng để tịnh tiến phần tử theo trục x
translateY(y) Được sử dụng để tịnh tiến phần tử theo trục y
translateZ(z) Được sử dụng để tịnh tiến phần tử theo trục z
scaleX(x) Được sử dụng để Scale Transform theo trục x
scaleY(y) Được sử dụng để Scale Transform theo trục y
scaleY(y) Được sử dụng để Scale Transform theo trục z
rotateX(angle) Được sử dụng để Rotate Transform theo trục x
rotateY(angle) Được sử dụng để Rotate Transform theo trục y
rotateZ(angle) Được sử dụng để Rotate Transform theo trục z

3D Transform theo trục x trong CSS

Ví dụ dưới đây minh họa cách sử dụng của 3D Transform theo trục x trong CSS:

<html>
   <head>
   
      <style>
         div {
            awidth: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#myDiv {
            -webkit-transform: rotateX(150deg); 
            
            /* Safari */
            transform: rotateX(150deg); 
            
            /* Cu phap chuan */
         }
      </style>
      
   </head>
   <body>
   
      <div>
      3D Transform trong CSS3
      </div>
      
      <p>Rotate theo truc X</p>
      
      <div id="myDiv">
      3D Transform trong CSS3.
      </div>
      
   </body>
</html>

Kết quả là:

3D Transform theo trục y trong CSS

Ví dụ dưới đây minh họa cách sử dụng của 3D Transform theo trục y trong CSS:

<html>
   <head>
   
      <style>
         div {
            awidth: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#yDiv {
            -webkit-transform: rotateY(150deg); 
            
            /* Safari */
            transform: rotateY(150deg); 
            
            /* Cu phap chuan */
         }
      </style>
      
   </head>
   <body>
   
      <div>
      3D Transform trong CSS3
      </div>
      
      <p>Rotate theo truc Y</p>
      
      <div id="yDiv">
      3D Transform trong CSS3.
      </div>
      
   </body>
</html>

Kết quả là:

3D Transform theo trục z trong CSS

Ví dụ dưới đây minh họa cách sử dụng của 3D Transform theo trục z trong CSS:

<html>
   <head>
   
      <style>
         div {
            awidth: 200px;
            height: 100px;
            background-color: pink;
            border: 1px solid black;
         }
         div#zDiv {
            -webkit-transform: rotateZ(90deg); 
            
            /* Safari */
            transform: rotateZ(90deg); 
            
            /* Cu phap chuan */
         }
      </style>
      
   </head>
   <body>
   	  <div>
      3D Transform trong CSS3
      </div>
      
      <p>Rotate theo truc Z</p>
      
      <div id="zDiv">
      3D Transform trong CSS3
      </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

3D Transform trong CSS

Sử dụng 3D Transform trong CSS, bạn có thể di chuyển các phần tử theo 3 trục: x, y và z. Dưới đây là các ví dụ xác định một cách rõ ràng cách phần tử sẽ quay theo các trục. Các phương thức của 3D Transform trong CSS Bảng dưới liệt kê các phương thức được sử dụng để gọi 3D Transform trong ...

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

Tìm hiểu về Biến trong CSS

Sử dụng biến trong CSS Những website lớn thường sẽ sử dụng rất nhiều CSS với lượng lớn giá trị bị lặp lại. Giả sử khi bạn muốn sửa màu chủ đạo của website thì rất có khả năng bạn sẽ phải sửa ở rất nhiều vị trí ví dụ như button, navbar, title,.... Điều này gây ra rất nhiều khó khăn khi code cũng ...

Tạ Quốc Bảo viết 20:18 ngày 11/08/2018

Bài 14: After và Before trong CSS

Trong CSS có hai thuộc tính dùng để bổ sung thành phần vào đằng trước và đằng sau thẻ HTML đó là thuộc tính after và before, hai thuộc tính này ...

Hoàng Hải Đăng viết 09:53 ngày 03/08/2018

Bài 12: Position Fixed trong CSS

Hôm nay mình sẽ trình bày một thuộc tính khá hay trong CSS đó là thuộc tính position fixed trong CSS . Đây là một thuộc tính hay sử dụng và có ...

Tạ Quốc Bảo viết 09:52 ngày 03/08/2018

Bài 15: Kỹ thuật ClearFix trong CSS

Trong bài tìm hiểu thuộc tính float thì mình có sử dụng sơ qua về kỹ thuật ClearFix này rồi nhưng không chi tiết lắm, vì vậy trong bài này mình sẽ ...

Trịnh Tiến Mạnh viết 09:49 ngày 03/08/2018
0