前端大佬们来一下，帮忙解惑一下，实在搞不懂这个3D旋转+移动

xuegaoxiansen

transform: rotateY(60deg) translateZ(300PX);






解读：先y轴顺时针旋转60度，再沿着z轴移动300px。

可是Z轴不是垂直屏幕的移动嘛，实际情况怎么会是沿着x轴移动了300px。

涛之雨

沿中轴线吧

耿梦莹123

css旋转很玄妙，学好了很牛的

magefox

你的理解是对的，但是这个表现就是正常的。可能是你理解的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轴垂直于屏幕，人眼看上去没有任何区别。或许稍稍变大一些。为了区别应该是把视图向右旋转了一些。

shiguang399

你Y轴转了，你Z轴还能留在原地？你Y轴动了60度，Z轴已经不是面向你了，是面向右边60度

_小白

这是我的理解，相当与宽变为一半，右移150√3px

图解

lished

应该是三维坐标系一起旋转60度然后再沿着Z轴旋转后的方向平移300PX