transform: translateZ(-25px) rotateX(90deg);
为什么移动为-25pX?
为什么旋转是沿着X轴,而不是Z轴?
perspective属性用来设置视点，在css3的模型中，视点是在Z轴所在方向上的。任务三设置了perspective为200px
translateX,translateY表现出在屏幕中的上下左右移动，translateZ的直观表现形式就是大小变化，实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）。比如设置了perspective为200px;那么translateZ的值越接近200，就是离的越近，看上去也就越大，超过200就看不到了，因为相当于跑到后脑勺去了，你不可能看到自己的后脑勺。（200-translateZ的值）就是视点和xy平面的距离（初始是屏幕的位置，此时translateZ的值为0）。
需要注意的一点是，整个坐标系中各各坐标轴的相对关系是固定的。正常情况下，视点和我们的眼睛是同一个方向的如同上面所讲。而当执行如rotateX(90deg)等旋转变换时，zy平面旋转，z轴和y轴的指向也会变化90度。此时z轴指向上方，视点也是在上方，此时我们从屏幕上看的就不是直观的元素大小变化，而是元素的升降变化，好像站在远处在看一部电梯或者你把书本平放举过头顶或下放那样，需要一点空间想象能力理解一下。
首先，translate表示位移，并不存在translteZ情况。只有三种：translate，translateX，translateY。你可以看成坐标。有正方向和负方向，负值表示向负轴的方向位移。eg:translateX(-25px) ,表示水平方向左移25px。
rotateX表示沿X轴旋转。需要Z轴旋转应用rotateZ（90deg）。
望采纳！