原文地址：CSS is magic, its time you try 3D

原文做者：Ankita Chakraborty

译文出自：掘金翻译计划

本文永久连接：github.com/xitu/gold-m…

译者：tong-h

校对者：Chorer PassionPenguin

CSS 是魔法, 是时候试试 3D 了

CSS transform 是 css 最全能，最神奇的属性之一。它不只是在你的网站上实现平滑动画的最佳方式，更是你创造奇迹的一种方式。好比这个 🙀 —css

我先为这几个占了你的网络宽带的动图道歉，但我但愿它是值得的！🤜🤛html

等下，这个立方体的两个面不见了！！！前端

我是故意这么作的，这样就会更形象，也更容易理解。我会在文章末尾添加一个连接用于获取上面示例的完整代码！android

先说最重要的，Translate 是如何工做的？

translate 方法主要是将一个 html 元素从它真实的位置上移动，并且不会干扰布局树上的其余兄弟或父级元素。简单来讲，translateX 方法是将元素左右移动，而 translateY 是上下移动元素。ios

但 Z 轴是什么？

为了更形象地了解 translate 是如何沿着 Z 轴工做的，想象一下你的 div 在你的屏幕中先后移动而不是上下或左右。css3

这怎么可能？一个网站看上去就像是一本书中的一页纸，对吧？怎么可能会有东西从屏幕中跑出来向你靠近（或者远离你）？git

你的 div 固然不会真的跑出来，但它给你一种感受好像它会。让咱们一块儿看看沿着不一样的轴修改 translate 的值会怎样。github

我不知道你怎么想，但这个绿色的盒子看起来并不像是在靠近或者远离我。👺后端

如何解决这个问题呢？咱们须要改变一下咱们的视角。😉安全

CSS 的 perspective 属性

若是不设置正确的 perspective 值，你没法在视觉上检测到 Z 轴的改变。

perspective 属性定义元素与用户的距离。那么，相比于一个较高的值，一个较低的值产生的 3D 效果会更强烈。

来源 —— W3 Schools

让咱们给这三个方块的父元素加上下面的 CSS ——

瞧：

rotate 方法

顾名思义，rotate 根据一个给定的角度，沿着某一个轴旋转元素。但咱们须要一点视觉效果来展现 rotate 是如何沿着不一样的轴工做的。

立方体

咱们终于能够从立方体的面开始了！咱们将有四个面 —— bottom，front，back，left：

一样的，我为主要的包裹容器 box-wrapper 添加了一些 css。

注意我为容器添加了 transform-style: preserve-3d，这是渲染 3D 子元素的一个重要步骤。每个面的宽高都是 200px，咱们须要记住这个值，由于咱们将依据每个面的尺寸为每一个面添加 translate 值。

立方体的每个面都将是一个绝对的划分，我添加了文字用于表明每个面。我为每个面添加了 opacity: 0.5，这样就能清楚地看到它们之间的重叠了。

为了将 front 放到前面，咱们为它添加 translateZ(100px)。

对，看起来就像这样。🙁

那么咱们怎么使它 3D 化？咱们的 perspective 知识在这里要派上用场了。

添加这个 css 到包裹容器的父级元素 box-container：

一样的，为了将 back 调后，咱们将为它添加与 front 相反的 css。

效果 ——

你可以想象 front 向你靠近，back （黄色那个）离你远去吗？若是这仍然不足以描绘，那让咱们试着把立方体的包裹容器旋转一下：

很奇妙，对吗？

下一步，咱们须要安顿 bottom 💁‍♀️，为了将 bottom 放到适当的位置，咱们把他沿着 X 轴旋转 ** 90 度**。

咱们还须要移动它的位置使它能正好在立方体的 front 和 back 之间。咱们能够作的是移动 bottom 使其与 front 一致，而后旋转它。听起来有点困惑对吗？

步骤 —— 1: 将 bottom 和 front 对齐

CSS:

效果:

步骤 —— 2: 将 bottom 旋转 90 度

CSS:

Result:

bottom 看起来如今安全的在本身的位置上了。但 left 好像被困在了中间。🙍‍♀️ 首先咱们须要将它移动到旁边而后旋转它。让咱们把他沿着 X 轴移动 -100px，而后在 Y 轴上旋转它。

CSS:

效果:

看！咱们的近似立方体已经快完成了。我建议你在每个轴上都尝试调整一下 translate 和 rotate 的值，尝试添加顶面和右面去作一个完整的立方体。

如今，最后关键的一步，旋转咱们的立方体 😍

CSS:

将上面的动画添加到咱们的 box-wrapper 上 ——

效果 🤜🤛:

相同的工做代码，参考[GitHub 仓库]](github.com/ankita1010/… CSS 3D 这个魔法之池。💫

请注意 —— 我调整了 perspective 的值，以及添加了一些动画来达到侧面的最终位置，以更清楚地展现变化。我稍微旋转了 box-wrapper，这样从正确的角度看更明显些。

干杯！

若是发现译文存在错误或其余须要改进的地方，欢迎到掘金翻译计划对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

掘金翻译计划是一个翻译优质互联网技术文章的社区，文章来源为掘金上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注掘金翻译计划、官方微博、知乎专栏。