CSS-3D转换

2D和3D

• 2D就是一个平面, 只有宽度和高度, 没有厚度
• 3D就是一个立体, 有宽度和高度, 还有厚度
  默认情况下所有的元素都是呈2D展现的

如何让某个元素呈3D展现

和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可

转换属性

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

Transform 方法

函数	描述
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 转换元素的透视视图