CSS 很神奇，是时候尝试 3D 了

CSS 变换是CSS最通用和最神奇的属性之一。它不仅是在您的网站上实现流畅动画的最佳方式，而且您还可以使用CSS 3D 转换创造奇迹。 像这个🙀——

在这里插入图片描述

我提前为数个 GIF 占用您的互联网带宽而道歉，但我希望这是值得的！🤜🤛

但是等等，立方体的两个边都不见了！！！ 我故意这样做是为了更容易理解和形象化。我会在文末添加获取上述结果的完整代码链接！

第一件事 - translate是如何工作的？

translate方法基本上将 HTML 元素从其实际位置移动，而不会干扰布局树上的任何其他兄弟/父元素。总而言之，translateX方法会左右移动元素，而translateY方法会上下移动元素。

在这里插入图片描述

但是 Z 轴到底是什么？

要可视化translate沿 Z 轴的工作方式，请想象您的 div 向您移动和远离您，而不是在屏幕上从上到下或从左到右 —