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 value3D 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 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
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é