AtoZ CSS截屏视频：RotateY CSS转换

落日映苍穹つ 2022-12-03 09:52 153阅读 0赞

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series [here][].

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在[此处][here]找到该系列的其他条目。

## 成绩单 **(**Transcript**)** ##

In the previous episode we learned about the `transform` property and the value `translateX()`.

在上一集中，我们了解了`transform`属性和值`translateX()` 。

In this episode we’ll be digging deeper into transforms and manipulating elements in 3D.

在本集中，我们将更深入地研究3D中的变换和操纵元素。

In this episode we’ll learn all about:

在这一集中，我们将学习以下所有内容：

*  3D space in CSS
    
    CSS中的3D空间
 *  How to rotate elements around their vertical and horizontal axis
    
    如何围绕元素的垂直和水平轴旋转元素
 *  And how perspective works
    
    以及透视如何起作用

### 3D空间 **(**3D space**)** ###

The browser acts a bit like a two-dimensional canvas on which we layout blocks of content and style images, text and links to create a website or web app.

浏览器的行为有点像二维画布，我们在其上布置内容和样式图像，文本和链接的块以创建网站或Web应用程序。

If you recall high-school maths, when looking at a graph there is a horizontal x-axis and a vertical y-axis.

如果您还记得中学数学，则在查看图形时会出现水平x轴和垂直y轴的情况。

There’s a third axis that comes directly out from the screen, known as the z-axis. We’ll look into this more in the final episode of this season when we talk about `z-index`. For now, we just need to know that there is a third dimension and we can transform elements from being in a 2D plane to a 3D one using 3D transforms.

屏幕上直接出现了第三个轴，称为z轴。 当我们谈论`z-index`时，我们将在本赛季的最后一集中对此进行更多研究。 现在，我们只需要知道存在第三维，就可以使用3D变换将元素从2D平面转换为3D平面。

When dealing with elements in 3D space, we can ensure they appear visually as if they are in a third plane by setting the `transform-style` property to `preserve-3d` on the parent container.

在3D空间中处理元素时，我们可以通过将`transform-style`属性设置为在父容器上`preserve-3d`来确保它们看起来像在第三平面中一样。

This will allow all child elements to appear in 3D space. If this property is not set, elements will appear flattened and the effect won’t be as obvious.

这将允许所有子元素出现在3D空间中。 如果未设置此属性，则元素将变得展平并且效果不会那么明显。

### 旋转 **(**Rotate**)** ###

Rotation can be very useful in many aspects of design – from a complete 180 to just a small handful of degrees.

从完整的180度到很小的角度，旋转在设计的许多方面都非常有用。

The default axis of rotation is the z-axis.

默认的旋转轴是z轴。

The amount of rotation can be specified in degrees or radians. I vaguely remember radians from maths class but I always use degrees because they feel a lot more comfortable to me.

旋转量可以以度或弧度为单位指定。 我依稀记得数学课上的弧度，但是我总是使用度数，因为它们对我来说要舒服得多。

I’ve got an image here with a white border around it and a drop shadow. If I wanted to rotate the image, I can do so by using the `transform` property and the the `rotate()` function.

我在这里有一个带有白色边框和阴影的图像。 如果要旋转图像，可以使用`transform`属性和`rotate()`函数来`rotate()` 。

A positive value with rotate clockwise and a negative value, anti-clockwise.

顺时针旋转一个正值，逆时针旋转一个负值。

img {
      transform: rotate(10deg);
    }

This is the same as using the single-axis rotation of `rotateZ()` as the image is rotating around the z-axis.

这与在图像围绕z轴旋转时使用`rotateZ()`的单轴旋转相同。

When using `rotateY()`, the image rotates around the y-axis which can be a useful trick to achieve something like a card flip effect or something similar.

当使用`rotateY()` ，图像绕着y轴旋转，这对于实现诸如卡片翻转效果或类似功能而言可能是一个有用的技巧。

img {
      transform: rotateY(45deg);
    }

If I add in an animation that continuously rotates the image around the y-axis, it should be a bit clearer as to what’s going on.

如果我添加了一个动画，该动画使图像围绕y轴连续旋转，则应该更清楚地了解发生了什么。

img {
      animation: spin 2s infinite linear;
    }
    @keyframes spin {
      from {transform: rotateY(0deg);}
      to {transform: rotateY(360deg);}
    }

You may notice that when the element rotates around 180 degrees, the image appears to become a mirror image. By default, the back of the image is visible even when rotated around so the front face of it is pointing away from the viewer.

您可能会注意到，当元素旋转180度时，图像似乎变成了镜像。 默认情况下，即使旋转图像的背面也是可见的，因此图像的正面指向查看器。

The visibility of the back of the element can be controlled with the `backface-visibility` property. It takes the values `visible` or `hidden` where `visible` is the default.

元素`backface-visibility`性可以通过`backface-visibility`属性控制。 它采用`visible`或`hidden`的值，其中`visible`是默认值。

A slightly more sane use of rotate is to add subtle effects to elements on the page. The browser support is IE9+ but because this is a fairly unimportant cosmetic bit of styling, having non-rotated elements in old IE isn’t a big deal to me. It’s always worth testing to be on the safe side, though – just in case.

旋转的一种更为合理的用法是为页面上的元素添加微妙的效果。 浏览器支持的是IE9 +，但是由于这是样式上的一个非常不重要的修饰，因此在旧IE中具有未旋转的元素对我来说并不重要。 为了安全起见，始终值得进行测试-以防万一。

### 透视 **(**Perspective**)** ###

When dealing with elements in 3D space, we can make the visual effect more extreme by bringing perspective into the equation.

当处理3D空间中的元素时，我们可以通过将透视图引入方程来使视觉效果更加极端。

Back in art class you might have learned that to achieve the effect of three dimensions on a 2D piece of paper, you can draw a series of straight lines from a vanishing point and ensure all horizontal features moving away from the viewer all converge at that point.

回到美术课，您可能已经了解到要在2D纸上实现三个尺寸的效果，可以从消失点绘制一系列直线，并确保所有远离观察者的水平特征都在该点汇聚。

This photo illustrates perspective quite nicely. But how does this feature in CSS?

这张照片很好地说明了视角。 但是CSS中的此功能如何？

Here I’ve got the markup for a cube. The six faces of the cube are contained within the “cube-x” `<div>` which is contained within two others so eventually we can take a look at rotating the cube in three dimensions.

在这里，我有一个多维数据集的标记。 多维数据集的六个面包含在“ cube-x” `<div>` ，该面又包含在另外两个面中，因此最终我们可以看一下如何在三个维度上旋转多维数据集。

.container {
      width: 400px;
      margin: 100px auto;
    }
    [class^="cube"] {
      position: relative;
      width: 200px;
      height: 200px;
      transform-style: preserve-3d;
    }
    [class^="face-"] {
      position: absolute;
      width: 200px;
      height: 200px;
      padding: 20px;
      color: rgba(0,0,0,0.75);
      border: 1px solid;
    
      font-size: 160px;
      font-family: Avenir;
      line-height: 1;
      text-align: center;
    }
    
    .face-one {
      transform: translateZ(100px);
      background-color: hsla(329,58%,52%,0.8);  
    }
    .face-two {
      transform: rotateX(90deg) translateZ(100px);
      background-color: hsla(0,0%,13%,0.8);
    }
    .face-three {
      transform: rotateY(90deg) translateZ(100px);
      background-color: hsla(54,70%,68%,0.8);
    }
    .face-four {
      transform: rotateY(-90deg) translateZ(100px);
      background-color: hsla(190,81%,67%,0.8);
    }
    .face-five {
      transform: rotateX(-90deg) translateZ(100px) rotate(180deg);
      background-color: hsla(261,100%,75%,1.0);
    }
    .face-six {
      transform: rotateY(180deg) translateZ(100px);
      background-color: hsla(84,76%,53%,0.8);
    }
    .cube-z {transform: rotateZ(0deg);}
    .cube-y {transform: rotateY(0deg);}
    .cube-x {transform: rotateX(0deg);}

At the moment the first face of the cube is visible on a 2D plane and none of the other sides are visible.

此刻，多维数据集的第一个面在2D平面上可见，而其他面均不可见。

If I rotate the “container” around the y-axis, we’ll be able to see each side in turn.

如果我绕着y轴旋转“容器”，我们将能够依次看到每一侧。

.cube-z {animation: spin 4s infinite linear;}
    
    @keyframes spin {
      from {transform: rotateY(0deg);}
      to {transform: rotateY(360deg);}
    }

This gives us a sense of three dimensions but if we add a bit of perspective, the effect becomes much clearer and a real sense of 3D is achieved.

这给了我们三维感，但是如果添加一些透视图，效果将变得更加清晰，并且可以实现真正的3D感。

.container {
      perspective: 500px;
      perspective-origin: 25% 50%;
    }

I’ll stop the animation and let’s have a look at what’s going on here.

我将停止动画，让我们看看这里发生了什么。

The perspective property controls the distance between the viewer and the zero point of the z-axis. A higher value moves the viewer further away, a lower value, moves the viewer closer which drastically increases the impact of the 3D positioning.

透视图属性控制查看器和z轴零点之间的距离。 值越高，观看者越远，而值越低，观看者越近，这会大大增加3D定位的影响。

We can control the placement of the vanishing point by changing the `perspective-origin` property.

我们可以通过更改`perspective-origin`属性来控制消失点的位置。

This property takes two length values, the first for the horizontal position and the second for the vertical. Manipulating these values changes the angle of view of the element and when the animation is turned back on, the effect can be quite striking.

此属性采用两个长度值，第一个用于水平位置，第二个用于垂直位置。 操纵这些值会更改元素的视角，并且当重新打开动画时，效果会非常惊人。

We’re almost at an end to this AtoZ series, so watch this space for the final letter where I discuss using the `z-index`.

我们几乎已经结束了该AtoZ系列文章，因此请在此空间中留意我使用`z-index`讨论的最后一封信。

> 翻译自: [https://www.sitepoint.com/atoz-css-screencast-rotatey/][https_www.sitepoint.com_atoz-css-screencast-rotatey]

[here]: https://www.sitepoint.com/tag/atoz-css/
[https_www.sitepoint.com_atoz-css-screencast-rotatey]: https://www.sitepoint.com/atoz-css-screencast-rotatey/