共计 1260 个字符，预计需要花费 4 分钟才能阅读完成。
使用 3d 变换，无涯教程可以将元素移动到 x 轴，y 轴和 z 轴。下面的示例清楚地指定了元素将如何旋转。
以下方法用于调用 3D 变换 -
| Sr.No. | Value & Remark |
|---|---|
| 1 |
matrix3d(n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n) 用于通过使用矩阵的 16 个值来变换元素 |
| 2 |
translate3d(x，y，z) 用于通过使用 x 轴，y 轴和 z 轴来变换元素 |
| 3 |
translateX(x) 用于使用 x 轴变换元素 |
| 4 |
translateY(y) 用于使用 y 轴变换元素 |
| 5 |
translateZ(z) 用于使用 y 轴变换元素 |
| 6 |
scaleX(x) 用于通过使用 x 轴缩放变换元素 |
| 7 |
scaleY(y) 用于通过使用 y 轴缩放变换元素 |
| 8 |
scaleY(y) 用于通过使用 z 轴变换元素 |
| 9 |
rotateX(Angular) 用于通过使用 x 轴旋转变换元素 |
| 10 |
rotateY(Angular) 用于旋转以使用 y 轴变换元素 |
| 11 |
rotateZ(Angular) 用于通过使用 z 轴旋转变换元素 |
X 轴 3D 变换示例
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#myDiv {
-webkit-transform: rotateX(150deg);
/* Safari */
transform: rotateX(150deg);
/* Standard syntax */
}
Tutorials point
Rotate X-axis
id="myDiv">
Learnfk point.
它将产生以下输出 -
Y 轴 3D 变换示例
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#yDiv {
-webkit-transform: rotateY(150deg);
/* Safari */
transform: rotateY(150deg);
/* Standard syntax */
}
tutorials point
Rotate Y axis
id="yDiv">
Learnfk point.
它将产生以下输出 -
Z 轴 3D 变换示例
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
/* Safari */
transform: rotateZ(90deg);
/* Standard syntax */
}
learnfk.com
rotate Z axis
id="zDiv">
tutorials point.
它将产生以下输出 -
CSS3 – 3D 转换属性 – 无涯教程网 无涯教程网提供使用 3d 变换，无涯教程可以将元素移动到 x 轴，y 轴和 z 轴。下面的示例清楚地指定了元素将 …
https://www.learnfk.com/css/css3-3d-transform.html
原文地址: 无涯教程 -CSS3 – 3D 转换属性
正文完
