3D Transform trong CSS

(6)
170 lượt xem
Share

HTML5 và CSS3 ra đời làm cho lĩnh vực thiết kế web sang một trang mới. Với CSS3, trang web của bạn có thể có nhiều hiệu ứng đẹp mắt mà không cần phải sử dụng đến ảnh động, nặng nề…Trong bài viết này eLib giới thiệu đến các bạn một cách dùng 3D Transform trong css và một vài ứng dụng dễ làm. Cùng tham khảo nhé!

Mục lục nội dung

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.

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

2. 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 {
            width: 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à:

3. 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 {
            width: 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à:

4. 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 {
            width: 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à:

Trên đây là bài viết của eLib.VN về 3D Transform trong CSS. Qua bài này chúng tôi đã hướng dẫn làm vài hình 3D đơn giản để giúp mọi người hiểu cách dựng hình 3D chỉ bằng CSS thuần, dựa vào những thứ trên, cộng thêm sức tưởng tương và khả năng toán học, hình học thì các bạn có thể tạo ra rất nhiều thứ hay ho.

(6)
170 lượt xem
Share
Ngày:11/11/2020 Chia sẻ bởi:Denni
TẢI VỀ XEM ONLINE

CÓ THỂ BẠN QUAN TÂM