CSS3 3D转换

CSS3 3D转换

CSS 除了支持上一章节的2D转换,还支持 3D 转换。2D转换是基于水平面的转换,3D则是立体的,可以通过以下对比来了解CSS 2D和3D转换的区别。

2D rotate
3D rotate

CSS 3D 转换浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性 Chrome IE Firefox Safari Opera
transform 36.0 10.0 16.0 9.0 23.0

CSS 3D 转换方法

通过 CSS transform 属性,您可以使用以下 3D 转换方法:

  • rotateX()
  • rotateY()
  • rotateZ()

CSS 3D 转换示例

rotateX() 方法

Rotate X

rotateX() 方法使元素绕其 X 轴旋转给定角度:

示例

#myDiv {
  transform: rotateX(150deg);
}

rotateY() 方法

Rotate Y

rotateY() 方法使元素绕其 Y 轴旋转给定角度:

示例

#myDiv {
  transform: rotateY(130deg);
}

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) 定义 3D 转换,使用 16 个值的 4×4 矩阵。
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 转换元素的透视视图。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/59511.html

(0)
上一篇 2021年8月9日
下一篇 2021年8月9日

相关推荐

发表回复

登录后才能评论