未设置透视距离

现在想要一个车的侧面效果图

鼠标移到下图上方(:hover),让这个图沿Y轴旋转一个角度rotateY(-45deg)

显然不是我们期望的效果? 我们想要的效果应该是屁股大头小的那种效果,一台真车和一个车的照片旋转45度,看到的效果肯定不一样

设置透视距离

以前的美术课中,3D场景都会涉及到透视(perspective),perspective属性设置镜头到目标元素平面的距离,设置transform:perspective(800px) rotateY(-45deg)


就会达到屁股大头小的效果,但照片通过透视模拟出的3D和那种反恐精英3D效果还是差得太大

透视距离越小,效果越明显

再把镜头再拉近点,transform:perspective(300px) rotateY(-45deg)