css变换(transform)--3d变换

• 3d坐标除了跟2d坐标一样的x，y轴外，还有一个z轴垂直于屏幕，从屏幕穿出为正方向

• 3d旋转
  图中红色的线可以想象为一个轴，3d旋转就是转动对应的轴
  正数代表顺时针旋转，负数代表逆时针旋转

  
  

.x {
    transform: perspective(200px) rotateX(60deg);
}
.y {
    transform: perspective(200px) rotateY(60deg);
}
.z {
    transform: perspective(200px) rotateZ(60deg);
}
<img class="x" src="head75.png" />
<img class="y" src="head75.png" />
<img class="z" src="head75.png" />

perspective属性定义3D元素距视图的距离，不定义的时候，只有2d效果，值越大，3d元素越小