3D转换效果的使用

3d的坐标系长什么样子，x轴 y轴以及z轴

3D场景和场景中的元素。所谓的3D场景就是3D元素的父元素。

3d转化的属性，只是多了空间的3d效果，属性基本不变。想要产生3D效果，至少需要两个属性给3D场景加上去

舞台 {
  transform-style: preserve-3d;
  perspective: 视距;
}

当我们添加了这样的属性后，舞台内的元素有3d效果，舞台没有3d效果。想要让舞台有3D效果，需要舞台的父元素再加对应的属性。

注意！！！！！在网页上所有的3d属性，都会触发GPU渲染，过渡和动画效果的性能更好

视距

两种视距的设置方式，一种可以给整个父元素设置，那么在父元素中不同位置的相同属性的元素，我们所看到的效果不同，另外一种单独给每一个子元素设置视距，使其展现出相同的效果

选择器 {
  perspective: 视距;
}

子元素 {
  transform: perspective(1000px);
}

调整视角

perspective-origin可以控制视角

• x left center right
• y top center bottom

还可以使用固定值和百分比

平移

平移在3d效果上，只是加了z轴的平移

• translateX()
• translateY()
• translateZ()
• translate3d()

旋转

• rotateX(旋转角度)
• rotateY(旋转角度)
• rotateZ(旋转角度) 和 rotate表现相同
• rotate3d()

需要设置对应的3d效果才能看到对应的旋转效果。

当角度为正值时，顺时针旋转，反之逆时针旋转。

rotate3d不是简单的把三个轴的角度进行复合，而是一个新的属性

rotate3d(x, y, z, 角度)

通过x y z三个矢量，然后确定一个方向，这个方向就是元素旋转的轴。

旋转的背面

默认情况下， 我们可以看到旋转后的背面的效果，如果我们不想看到，可以使用

选择器 {
  backface-visibility: hidden;
}

缩放

scaleZ，这个属性可以缩放z轴距离，不能给元素本身加，要给3D元素的父元素加。

scale3d(x, y, z) 三者的缩放的比例。