CSS3 3D 转换

css3 允许我们使用 3D 转换来对元素进行格式化

本节我们将学习以下 3D 转换方法

rotateX()
rotateY()



浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号

属性 Chrome    IEx / Edge Firefox Safari Opera
transform 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-origin
(three-value syntax)
36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
transform-style 36.0
12.0 -webkit-
11.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
perspective-origin 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-
backface-visibility 36.0
12.0 -webkit-
10.0 16.0
10.0 -moz-
4.0 -webkit- 23.0
15.0 -webkit-

rotateX() 方法


rotateX()方法,围绕其在一个给定度数X轴旋转的元素

div
{
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 与 Chrome */
}


rotateY() 方法


rotateY ()方法,围绕其在一个给定度数 Y 轴旋转的元素

div
{
    transform: rotateY(130deg);
    -webkit-transform: rotateY(130deg); /* Safari 与 Chrome */
}


CSS3 转换属性

下表列出了所有的 CSS3 转换属性

属性 描述
transform 向元素应用 2D 或 3D 转换
transform-origin 允许你改变被转换元素的位置
transform-style 规定被嵌套元素如何在 3D 空间中显示
perspective 规定 3D 元素的透视效果
perspective-origin 规定 3D 元素的底部位置
backface-visibility 定义元素在不面对屏幕时是否可见

CSS3 3D 转换方法

函数 描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值
scale3d(x,y,z) 定义 3D 缩放转换
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值
rotate3d(x,y,z,angle) 定义 3D 旋转
rotateX(angle) 定义沿 X 轴的 3D 旋转
rotateY(angle) 定义沿 Y 轴的 3D 旋转
rotateZ(angle) 定义沿 Z 轴的 3D 旋转
perspective(n) 定义 3D 转换元素的透视视图

链接: https://www.fly63.com/course/5_239