前端大佬们来一下，帮忙解惑一下，实在搞不懂这个3D旋转+移动
transform: rotateY(60deg) translateZ(300PX);
解读：先y轴顺时针旋转60度，再沿着z轴移动300px。
可是Z轴不是垂直屏幕的移动嘛，实际情况怎么会是沿着x轴移动了300px。
{:1_924:} 沿中轴线吧 css旋转很玄妙，学好了很牛的 你的理解是对的，但是这个表现就是正常的。可能是你理解的Z轴有问题。
你看这个图片例子可能很难看出来原因，建议用MDN官方例子来看。
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ() rotateY为转换/旋转，translateZ也是转换，都能改变元素位置，前者主要做旋转等功能，后者多用于改变元素的位置。Z轴就是垂直于X与Y所构成的面，也是就与你现在的屏幕垂直。此处的Z为负则往左移，为正则向右移，可以看作为往前或往后移动，但是与X是不同的，同数值下移动的位置不同，所以你会看到跟X的效果差不多。
注意：transform用在背景图片和img是不同效果的。 如果真正的z轴垂直于屏幕，人眼看上去没有任何区别。或许稍稍变大一些。为了区别应该是把视图向右旋转了一些。 你Y轴转了，你Z轴还能留在原地？你Y轴动了60度，Z轴已经不是面向你了，是面向右边60度 这是我的理解，相当与宽变为一半，右移150√3px
应该是三维坐标系一起旋转60度然后再沿着Z轴旋转后的方向平移300PX
页:
[1]