CSS 3D 变换
CSS 3D 变换方法
借助 CSS transform 属性,您可以使用以下 3D 变换方法:
rotateX()
rotateY()
rotateZ()
rotateX() 方法
rotateX() 方法以给定的角度围绕元素的 X 轴旋转元素:
示例
#myDiv {
transform: rotateX(150deg);
}
rotateY() 方法
rotateY() 方法将元素绕其 Y 轴旋转给定角度:
示例
#myDiv {
transform: rotateY(150deg);
}
rotateZ() 方法
rotateZ() 方法将元素绕其 Z 轴旋转给定角度:
示例
#myDiv {
transform: rotateZ(90deg);
}
CSS 变换属性
下表列出了所有 3D 变换属性:
属性 | 描述 |
---|---|
transform | 对元素应用 2D 或 3D 变换 |
transform-origin | 允许您更改变换元素的位置 |
transform-style | 指定嵌套元素在 3D 空间中的呈现方式 |
perspective | 指定 3D 元素的查看方式的视角 |
perspective-origin | 指定 3D 元素的底部位置 |
backface-visibility | 定义元素在不面向屏幕时是否可见 |
CSS 3D 变换方法
函数 | 描述 |
---|---|
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 使用包含 16 个值的 4x4 矩阵定义 3D 变换 |
translate3d(x,y,z) | 定义 3D 平移 |
translateX(x) | 定义 3D 平移,仅使用 X 轴的值 |
translateY(y) | 定义 3D 平移,仅使用 Y 轴的值 |
translateZ(z) | 定义 3D 平移,仅使用 Z 轴的值 |
scale3d(x,y,z) | 定义 3D 比例变换 |
scaleX(x) | 通过为 X 轴指定一个值来定义 3D 比例变换 |
scaleY(y) | 通过为 Y 轴指定一个值来定义 3D 比例变换 |
scaleZ(z) | 通过为 Z 轴指定一个值来定义 3D 比例变换 |
rotate3d(x,y,z,angle) | 定义 3D 旋转 |
rotateX(angle) | 定义沿 X 轴的 3D 旋转 |
rotateY(angle) | 定义沿 Y 轴的 3D 旋转 |
rotateZ(angle) | 定义沿Z 轴 |
perspective(n) | 定义 3D 变换元素的透视图 |
总结
本文介绍了CSS 3D变换Transforms的使用,如有问题欢迎私信和评论