如何使用 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);

很明显，第二个正方形发生了一些重叠。 它可能看起来不像预期的那么戏剧化，但添加透视属性（本教程后面的内容）会有所帮助。

透视属性已添加到此示例中。

旋转

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。 这也可以添加到上面的属性中。

如何使用 CSS3 过渡和变换来创建动画

有趣的动画可以使用 CSS3 通过使用变换和过渡来创建。 变换用于使元素从一种状态更改为另一种状态。 例如旋转、移动、倾斜……

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

transform属性如下所示： transform: perspective(600px); 透视属性看起来像这样： perspective: 600px; .

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

perspective的价值决定了 3D 效果的强度。 将低值视为非常明显，例如当您查看大型物体时的感觉。 值越大，效果越不强烈。

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

左侧的示例设置为大约 800 像素。 右侧的透视图更加剧烈，设置为 200 像素。

规模

比例Z（）

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

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

左侧示例的值为 2，右侧示例的值为 8。

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 矩阵可以取 6 个值，而 3D 矩阵需要 16 个（4×4 矩阵）！ 如果涵盖了所有细节，这将是一个很长的帖子，所以如果你想更多地探索这个概念，我强烈推荐 Codepen 上的这个交互式 matrix3d 实验。

这是 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 空间中“摆动”，而不是停留在父元素上。

如何创建具有 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);
 }

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

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