h5c3 3d部分

三维坐标系

transform: translateX(100px)：仅仅是在 x 轴上移动
transform: translateY(100px)：仅仅是在 y 轴上移动
transform: translateZ(100px)：仅仅是在 z 轴上移动 单位用px
transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离
默认的z轴的移动不会有效果，要搭配透视使用，透视需要写在被视察元素的父盒子上面，透视就相当于人的眼睛到屏幕的距离，所以透视的px赢过大于z轴上移动的距离，语法如下

body {
  perspective: 1000px;
}

透视需要写在被视察元素的父盒子上面

3d旋转
transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度代码案例 自定义轴是xyz的矢量组合
需要注意的是关于3d旋转时的中心点的问题，默认的中心点即是盒子最开始的中心点，中心点的改变方式与2d时相同

transform-origin: left top;

判断旋转的方向的时候可以使用左手法则，即左手的拇指指向 y 轴的正方向其余的手指弯曲方向就是该元素沿着 y 轴旋转正值的方向(正值)，其余轴同理

默认的3d环境是关闭的，如果需要显示3d元素需要在父盒子上设置
transform-style: preserve-3d 子元素开启立体空间