我有一个应用了transform: rotate3d(1,1,1,90deg)的图像，其中每个参数分别表示X，Y和Z轴（根据CSS）。
该图像应该从显示倾斜的视图中消失。
让我们分解一下：rotate3d(1,0,0,90deg)将隐藏图像，因为如果将图像在X轴上旋转90度，则图像将在X轴上平放。这部分有效。您可以在浏览器中对其进行测试。
让我们添加Y轴：rotate3d(1,1,0,90deg)，并且仍然没有显示正确的图像。现在，您可以将图像沿Y轴旋转到什么程度都没关系-我们仍然看不到图像。
当我添加第三轴Z-rotate3d(1,1,1,90deg)时，图像显示为歪斜。为什么？应该将不可见图像旋转90度，这将导致不可见图像））））
那么CSSrotate3d如何工作？有人知道吗？我尚未在互联网上找到答案。
最佳答案
hoijui，您是对的，这些数字组成了从我的图像中心到3d坐标（1,1,1）的轴。但是图像不会绕轴旋转-轴会旋转图像！ :)几乎就像伽利略的发现:)
因此，要了解rotate3d，只需拿一张正方形的纸，然后用牙签将其刺破即可。将纸和牙签放在眼睛前面（不要太靠近，否则会刺破眼睛！）。现在，将牙签尖端（面向您）倾斜到纸张的右下角（底部是因为在CSS rotate3d中，Y朝下）。 Z取决于牙签的长度。如果您的牙签的长度与纸的宽度相同，则坐标将是我在实验中使用的坐标（1,1,1）。现在开始滚动手中的牙签。如果尝试在Firebug或开发人员工具中手动增加角度，您将看到与在屏幕上看到的效果完全相同的效果。
关于css - 请解释一下CSS Rotate3D的工作原理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32486558/