Thứ Hai, 30 tháng 12, 2013
CSS3 3D Transforms
3D Transforms
CSS3 cho phép bạn định dạng các yếu tố của bạn bằng cách sử dụng biến đổi 3D.
Trong chương này, bạn sẽ tìm hiểu về một số 3D chuyển đổi phương pháp:
- rotateX ()
- rotateY ()
Nhấp chuột vào các yếu tố dưới đây, để thấy sự khác biệt giữa một 2D chuyển đổi và chuyển đổi 3D:
Xoay 2D
Xoay 3D
Hỗ trợ trình duyệt
| Tài sản | Hỗ trợ trình duyệt | ||||
|---|---|---|---|---|---|
| chuyển đổi | |||||
Internet Explorer 10 và Firefox hỗ trợ biến đổi 3D.
Chrome và Safari đòi hỏi các tiền tố-webkit-.
Opera chưa hỗ trợ biến đổi 3D.
Các rotateX () Phương pháp
Với rotateX () phương pháp, các yếu tố xoay quanh trục X của nó ở một mức độ nhất định.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) and Opera does not support the rotateX method.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
Thử nó cho mình »
Các rotateY () Phương pháp
Với rotateY () phương pháp, các yếu tố xoay quanh trục Y của nó ở một mức độ nhất định.
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer 9 (and earlier versions) and Opera does not support the rotateY method.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
</html>
Thử nó cho mình »
3D chuyển đổi phương pháp
| Function | Description |
|---|---|
| matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate3d(x,y,z) | Defines a 3D translation |
| translateX(x) | Defines a 3D translation, using only the value for the X-axis |
| translateY(y) | Defines a 3D translation, using only the value for the Y-axis |
| translateZ(z) | Defines a 3D translation, using only the value for the Z-axis |
| scale3d(x,y,z) | Defines a 3D scale transformation |
| scaleX(x) | Defines a 3D scale transformation by giving a value for the X-axis |
| scaleY(y) | Defines a 3D scale transformation by giving a value for the Y-axis |
| scaleZ(z) | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate3d(x,y,z,angle) | Defines a 3D rotation |
| rotateX(angle) | Defines a 3D rotation along the X-axis |
| rotateY(angle) | Defines a 3D rotation along the Y-axis |
| rotateZ(angle) | Defines a 3D rotation along the Z-axis |
| perspective(n) | Defines a perspective view for a 3D transformed element |
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét