如何使用 CSS3 转换属性创建 3D 设计

涉及 CSS3 变换属性时有两个维度，2D 和 3D。 动画时，变换用于使元素从一种状态变为另一种状态。 本教程是本指南关于 2D 动画的扩展。 我将提供一些有关 3D 设计的见解，以及如何通过结合这些基本概念来创建出色的动画。

3D 变换可能非常详细，如果有很多不同的部分组合在一起可能会变得复杂，因此从基本构建块开始是有帮助的。 其中一些概念看起来很熟悉，但“z”在 3D 中工作时看起来会很新鲜。 3D 变换扩展了 2D CSS 变换以包括 z 轴，允许对 DOM 元素进行 3D 变换。

什么是 Z 轴？

z轴会有很多参考。 很容易将其视为某物朝向或远离您的测量距离。 如果它是一个正值，它离你更近。 如果它是一个负值，它离你越远。

3D 变换示例

3D 变换的基本属性是translate3d 、 scale3d 、 rotateX 、 rotateY 、 rotateZ 、 perspective和matrix3d 。 更多参数包含在translate3d 、 scale3d和matrix3d中，因为它们接受 x、y 和 z 的参数。 scale 属性接受一个角度值，perspective 也接受一个值。

翻译

翻译Z()

这通过仅使用 z 轴值定义 3D 平移。 您可能还记得从 2D 翻译中翻译 x 和 y。 这个想法与translateX() 、 translateY()和translateZ()相同，因为每个都采用一个长度值，使元素沿正确的轴移动指定的距离。

在此示例中， translateZ(-20px)会将元素移动到距查看器 20 像素的位置。

以下是创建此示例的代码片段：

 -webkit-transform: translateZ(-20px); -ms-transform: translateZ(-20px); transform: translateZ(-20px);

翻译3d()

translate3d()函数用于在 3D 空间中移动元素的位置。 这个变换是通过指定坐标来创建的，坐标定义了它在每个方向上移动的量。

函数transform: translate3d(20px, -15px, 70px); 将图像沿正 x 轴移动 20 像素，沿负 y 轴移动 15 像素，然后沿正 z 轴移动 70 像素。

这是translate3d的示例：

 -webkit-transform: translate3d(20px, -15px, 70px); -ms-transform: translate3d(20px, -15px, 70px); transform: translate3d(20px, -15px, 70px);

很明显，第二个正方形有一些重叠。 它可能看起来不像预期的那样引人注目，但添加 perspective 属性（在本教程的后面）会有所帮助。

旋转

rotate3d()函数将元素在 3D 空间中绕轴旋转指定角度。 这可以写成rotate(x, y, z, angle) 。

旋转X()

像素值在这里不起作用，它需要以度为单位。 rotateX()方法以给定的度数围绕其 x 轴旋转元素。 看到矩形变短了吗？ 它沿 x 轴旋转。 此示例显示了 55 度的旋转。

 -ms-transform: rotateX(55deg); /* IE 9 */ -webkit-transform: rotateX(55deg); /* Safari */ transform: rotateX(55deg);

旋转Y()

rotateY()方法围绕其 y 轴旋转元素。 请注意底部矩形不如顶部宽？ 它旋转了 60 度，因此看起来不像上面的矩形那么宽。

 -ms-transform: rotateY(60deg); /* IE 9 */ -webkit-transform: rotateY(60deg); /* Safari */ transform: rotateY(60deg);

旋转Z()

rotateZ()方法将元素绕其 z 轴旋转指定的度数。 在本例中，该值为 120 度。

 -ms-transform: rotateZ(120deg); /* IE 9 */ -webkit-transform: rotateZ(120deg); /* Safari */ transform: rotateZ(120deg);

旋转 3d()

函数rotate3d(1, -1, 1, 45deg)将图像沿 y 轴旋转 45 度角。 请务必注意，您可以使用负值将元素沿相反方向旋转。

由于这比单轴规范更复杂， rotate3d可以这样分解： rotate3d(x,y,z,angle)其中 x=1，y=-1，z=1，旋转角度 = 45 度.

设置样式的代码如下所示：

 -ms-transform: rotate3d(1, -1, 1, 45deg); /* IE 9 */ -webkit-transform: rotate3d(1, -1, 1, 45deg); /* Safari */ transform: rotate3d(1, -1, 1, 45deg);

测试基础

沿 x 轴顺时针旋转 45 度。

 transform: rotate3d(1, 0, 0, 45deg);

沿 y 轴顺时针旋转 45 度。

 transform: rotate3d(0, 1, 0, 45deg);

沿 z 轴顺时针旋转 45 度。

 transform: rotate3d(0, 0, 1, 45deg);

值得一提的是，根据指定的值，有时旋转并不明显； 例如，这不会引起注意： transform: rotate3d(0, 0, 0, 50deg);

看法

这可能是最“维度”的转变。 这是您真正获得视角的地方。 如果在未设置透视的情况下对元素应用 3D 变换，则生成的效果将不会显示为三维。 这也可以添加到上面的属性中。

要激活 3D 空间，元素需要透视。 这可以通过两种方式应用：使用transform属性或perspective属性。

transform属性看起来像这样： transform: perspective(600px); perspective 属性看起来像这样： perspective: 600px; .

以下示例将在两者之间进行更改，因此请务必仔细查看代码。

perspective值决定了3D效果的强烈程度。 将低值视为真正引人注目，就像您在看大物体时的感觉一样。 值越大，效果越弱。

消失点的位置也可以自定义。 值得一提，并且需要进行大量实验，因为它与 CSS 透视图相关。 默认情况下，3D 空间的消失点位于中心。 使用 perspective-origin 属性更改消失点的位置。 它看起来像： perspective-origin: 15% 55% 。

规模

缩放Z()

这通过为 z 轴提供一个值来定义 3D 比例转换。 因为它只沿z轴缩放，所以需要其他函数来演示缩放效果。 看看矩形是如何朝向观察者的，它是如何真正显示透视的？

要完全理解 scale(Z)，请尝试使用该值，您会发现视角随着值的增大而变得“更清晰”。

scale3d(x,y,z)

scale3d()函数更改元素的大小并写为scale(x, y, z) 。 与scaleZ一样，除非与perspective一起使用，否则透视图的完整外观并不明显。

这个例子使用这个：

 -ms-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* IE 9 */ -webkit-transform: perspective(500px) scale3d(0.8, 2, 0.2); /* Safari */ transform: perspective(500px) scale3d(0.8, 2, 0.2);

快速说明：如果向量的所有三个坐标都相等，则缩放是统一的并且不会有明显差异。

 transform: scale3d(1, 1, 1); /* unchanged */ transform: scale3d(2, 2, 2); /* twice the original size */

矩阵3d()

2D 矩阵可以有六个值，而 3D 矩阵有 16 个（4×4 矩阵）！ 如果涵盖了所有细节，这将是一篇很长的文章，所以如果您想更多地探索这个概念，我强烈推荐 Codepen 上的这个交互式 matrix3d 实验。

matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1)

如何创建
具有 3D 变换的动画

现在已经涵盖了基础知识，下一步是创建交互式动画。 使用 CSS3 变换和过渡，元素通过旋转、缩放或添加透视图从一种状态变为另一种状态。

如果您不熟悉 CSS 动画，请务必了解如果没有转换，正在转换的元素会突然从一种状态变为另一种状态。 为防止这种情况，可以添加一个过渡，这样您就可以控制变化，使其看起来更平滑。

如何创建卡片翻转

谁不喜欢打牌？ 这个例子有一张双面卡片，你可以通过转换翻转它来看到两面。 如果你看一下body标签，很多效果都来自perspective属性。 它设置为 500px。 像 100px 这样的较低值看起来非常“倾斜”。

这是开始的 HTML：

 <div class="wrapper"> div class="side-one"></div> <div class="side-two"></div> </div>

CSS 是让它发生的原因：

 body { -webkit-perspective: 500px; perspective: 500px; } .wrapper { -webkit-transition: all 1s ease-in; transition: all 1s ease-in; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; margin: 100px auto; width: 250px; height: 250px; cursor: pointer; } .wrapper div { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; border-radius: 10px; background-position: 50% 50%; background-size: 150px; background-repeat: no-repeat; box-shadow: inset 0 0 45px rgba(255,255,255,.3), 0 12px 20px -10px rgba(0,0,0,.4); color: #FFF; text-align: center; text-shadow: 0 1px rgba(0,0,0,.3); } .side-one { z-index: 400; background: #50c6db url(image.png); } .side-two { -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); background: #ef4e65 url(image.png); } .wrapper:hover { -webkit-transform: rotateY(-1turn); transform: rotateY(-1turn); }

这可以在 Codepen 上找到。

如果您不熟悉变换，这对您来说可能很有趣： transform: rotate(1turn); 这个单位非常适合我们的卡片，因为“转”单位正是它听起来的样子，即一个完整的圆圈。

我还使用了一些缓动来制作自定义的旋转方式。 这是通过transition: all 1s ease-in; .

片段中的另一个 3D 属性是transform-style: preserve-3d; . 通过包含这一点，它允许元素在三维空间中“摇摆”，而不是留在父元素中。

如何创建具有 3D 效果的文本

这个例子的灵感来自于一张老电影海报。 有许多不同的字体可以利用出色的 CSS 样式，因此绝对可以实现独特的字体效果。 此文本使用rotate3d和transform3d来赋予其独特的转换。

HTML 非常简单：

 <div class="container"> <div class="text-wrapper"> <div class="text">New York City</div> </div> </div>

这是基本的 CSS：

 .container{ -webkit-perspective: 600; } .text { transform: rotate3d(2, 2, .5, 22deg)translate3d(100px, 0px, 0px); }

可以在 Codepen 上找到更详细的 CSS 和示例。

希望 CSS 3D 转换为您的设计带来新的维度。 利用透视是使元素看起来更有立体感的好方法。 结合过渡，创建动画时有很多可能性。