3D Transform trong CSS
Sử dụng , 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 Bảng dưới liệt kê các phương thức được sử dụng để gọi : Giá trị Miêu tả matrix3d(n,n,n,n,n,n,n,n,n,n,n ...
Sử dụng , 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
Bảng dưới liệt kê các phương thức được sử dụng để gọi :
| 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>
3
</div>
<p>Rotate theo truc X</p>
<div id="myDiv">
3.
</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>
3
</div>
<p>Rotate theo truc Y</p>
<div id="yDiv">
3.
</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>
3
</div>
<p>Rotate theo truc Z</p>
<div id="zDiv">
3
</div>
</body>
</html>
Kết quả là:
Loạt bài hướng dẫn Học CSS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: và
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để 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 vietjack.com:
