Kiểu chuyển đổi 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 rõ ràng cách phần tử sẽ quay theo các bộ phận

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

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

The valueMiêu tả matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) used to be used for the process section by used 16 value

3D Transform theo trục x trong CSS

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

   
   
      
      
   
   
   
      

      3D Transform trong CSS3
      
      
      
Rotate theo truc X
      
      

      3D Transform trong CSS3.
      
      
   

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 3D Transform theo hệ y trong CSS

   
   
      
      
   
   
   
      

      3D Transform trong CSS3
      
      
      
Rotate theo truc Y
      
      

      3D Transform trong CSS3.
      
      
   

Kết quả là

3D Transform theo z trong CSS

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

   
   
      
      
   
   
   	  

      3D Transform trong CSS3
      
      
      
Rotate theo truc Z




      
      

      3D Transform trong CSS3
      
   
 

Kết quả là

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng. miễn phí. Tải ngay ứng dụng trên Android và iOS

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube

Theo dõi fanpage của nhóm https. //www. Facebook. com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https. //www. Facebook. com/tuyen. vietjack to continue theo dõi hàng loạt bài viết mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile. mới nhất của chúng tôi

Đối với các Nhà thiết kế khi tiến hành xoay hoặc co giãn ảnh thông thường họ sử dụng các công cụ đồ họa như Photoshop, Firework,… để thực hiện, nhưng đối với CSS3 thì họ thực hiện các đối tượng xoay một cách hết sức . Để minh chứng cho điều đó trong bài viết này, tôi xin trình bày với các bạn cách xoay và co giãn một đối tượng ảnh bằng cách sử dụng lệnh của CSS3.

A number of value of property transform.

xoay. xoay đối tượng
tỷ lệ. co giãn đối tượng
skew. đối tượng méo mó
dịch. dịch chuyển đối tượng

Constructor

đối_tượng {
   biến đổi. giá_trị; . giá_trị; . giá_trị); . giá_trị; . giá_trị;
   -ms-transform: giá_trị; /* Cho IE9 */
   -webkit-transform: giá_trị); /* Chrome và Safari */
   -moz-transform: giá_trị; /* Firefox */
   -o-transform: giá_trị; /* Opera */
}

1. Xoay đối tượng
1. 1. Xoáy 2D
Xoay một đối tượng bất kỳ mà chúng sử dụng thuộc tính biến đổi với giá trị rotate(góc xoay). Giá trị của góc xoay bạn có thể dùng đơn vị là deg (độ) và rad (radian).
Ví dụ ban đầu chúng ta có một đối tượng ảnh như sau.

Sau khi thêm style vào đối tượng

1. 2. Roo 3D

Các giá trị.
xoayX(góc). Định nghĩa cho phép quay 3D dọc theo trục X.
xoayY(góc). Định nghĩa cho phép quay 3D dọc theo trục Y.
xoay Z(góc). Định nghĩa cho phép quay 3D dọc theo trục Z.

2. Co giãn đối tượng.

To co giãn đối tượng ta sử dụng thuộc tính biến đổi với giá trị scale(tỷ_ệ_co_dãn). Thuộc tính này sẽ có hoặc thư giãn các đối tượng tùy chọn theo tỷ lệ.
 – scaleX(tỷ_ệ_co_dãn). co expand theo chiều rộng
 – scaleY(tỷ_ệ_co_dãn). co giãn theo chiều cao.
Ta cũng có thể viết lại khoảnh khắc 2 trượng hợp này thành. scale(tỷ lệ theo chiều rộng, tỷ lệ theo chiều cao)

VÍ DỤ 1. Co object with the rate of 1/2

VÍ DỤ 2. Phóng to đối tượng lên gấp 1,5 lần hiện tại

biến đổi. tỷ lệ (1. 5);-moz-biến đổi. tỷ lệ (1. 5);-webkit-biến đổi. tỷ lệ (1. 5);” transform:scale(1.5);-moz-transform:scale(1.5);-webkit-transform: scale(1.5);” />

Ví dụ kéo dài ảnh gấp 2 lần theo chiều rộng

biến đổi. quy mô (2,1);-moz-biến đổi. tỷ lệ (2,1);-webkit-biến đổi. tỷ lệ (2,1);” transform:scale(2,1);-moz-transform:scale(2,1);-webkit-transform:scale(2,1);” />

3. Bóp méo đối tượng

Bóp méo đối tượng chúng ta có thuộc tính biến đổi với giá trị nghiêng(góc), tùy biến theo góc méo mà đối tượng sẽ bị lệch về bên trái hay bên phải.

VÍ DỤ 1. Bóp méo đối tượng với hệ số góc âm.

VÍ DỤ 2. Bóp méo đối tượng với hệ thống góc dương

Bóp méo đối tượng với 2 giá trị

Thuộc tính biến đổi trong CSS3 còn các giá trị có thể hiện đối tượng trên không gian 3 chiều (3D). Các bạn hãy tìm hiểu thêm với bảng dưới đây nhé