How CSS Perspective Works

CSS animation enthusiasts often use the powerful tool of perspective. While the perspective property itself cannot achieve 3D effects (because the base shape has no depth), you can use transform property to move and rotate objects in the 3D space (X, Y, and Z axis), and then use perspective to control the depth.

This article will start with the basics, gradually explain the concept of perspective, and finally create a complete 3D rotating cube animation.

Perspective Basics

We start with a simple green square and move it on three axes.

Moving an object on the X and Y axes is very simple, but if you move it on the Z axes, it looks like the square remains the same. This is because when the object moves on the Z axis, the animation brings it closer to us and then away from us, but the size (and position) of the square remains the same. This is where the CSS perspective attribute comes into play.

While perspective has no effect when the object moves on the X or Y axis, perspective makes the square look larger when it is close to us and smaller when it is far away from us. Yes, just like in real life.

The same effect also occurs when we rotate the object:

Rotating a square on the Z axis looks like a regular rotation we are all familiar with and love, but when we rotate a square on the X or Y axis (without using perspective), it looks like the square just becomes smaller (or narrower) rather than rotate. But when we add perspective, we can see that when the square rotates, the close side of the square looks larger, the far side looks smaller, and the rotation looks as expected.

Note that when the object rotates at an angle of 90° on the X or Y axis (or 270°, 450°, 630°, etc.), it will "disappear" out of view. Again, this is because we cannot add depth to the object, and at this position the width (or height) of the square will actually be 0.

Perspective value

We need to use a value to set perspective property. This value sets the distance of the object plane, or in other words, the intensity of perspective. The larger the value, the further you are from the object; the smaller the value, the more obvious the perspective effect.

Perspective of the origin

perspective-origin property determines the orientation of your "observe" object. If the origin is centered (this is the default) and the object moves to the right, it looks like you are watching it from the left (and vice versa).

Alternatively, you can center the object and move perspective-origin . When the origin is set to the side, it is like you "observe" the object from that side. The larger the value, the more it looks out of the center.

Transform

While both perspective and perspective-origin are set on the element's parent container and determine the position of the vanishing point (i.e. the distance from where you "observe" the object to the object plane), the displacement and rotation of the object are set using the transform property, which is declared on the object itself.

If you look at the code from the previous example, I move the square from one side to the other, you will see that I use the translateX() function - this makes sense because I want it to move along the X axis. But note that it is assigned to the transform property. This function is a transformation type that is applied directly to the element we want to convert, but its behavior conforms to the perspective rules assigned to the parent element.

We can "link" multiple functions to transform properties. But when using multiple transformations, there are three very important things to consider:

1. When an object is rotated, its coordinate system will change with the object.
2. When you translate an object, it moves relative to its own coordinate system (rather than its parent coordinate).
3. The order in which these values ​​are written changes (and will) change the final result.

To get the effect I wanted in the previous demo, I first need to translate the square on the X-axis. Only then can I spin it. If you do this in reverse order (rotate first, then translate), the result will be completely different.

To emphasize the importance of value order to transform properties, let's look at a few simple examples. First, it is a simple two-dimensional (2D) transformation of two squares, both of which have the same transformation values, but in different orders of declarations:

The same is true even if we rotate the square on the Y axis:

It should be noted that while the order of values ​​is important, we can simply change the values ​​themselves to get the desired result instead of changing the order of values. For example……

 <code>transform: translateX(100px) rotateY(90deg);</code>

...The same effect as the following:

 <code>transform: rotateY(90deg) translateZ(100px);</code>

This is because in the first row we moved the object on the X-axis before rotating the object, but in the second row we rotated the object, changed its coordinates, and then moved it on the Z-axis . Same result, different values.

Let's see something more interesting

Of course, squares are a great way to explain the general concept of perspective, but when we break it down into three-dimensional (3D) shapes, we can really see how perspective works.

Let's build a 3D cube using everything we've covered so far.

HTML

We will create a .container element that revolves around a .cube element, .cube contains six elements, representing the six faces of the cube.

<div class="container">
  <div class="cube">
    <div class="side front"></div>
    <div class="side back"></div>
    <div class="side left"></div>
    <div class="side right"></div>
    <div class="side top"></div>
    <div class="side bottom"></div>
  </div>
</div>

Universal CSS

First, we will add some perspective to the .container element. We will then make sure that the .cube element has a side length of 200px and adhere to the 3D transformation. I've added some expression styles here, but the key attributes are highlighted.

 /* Parent container with perspective*/
.container {
  width: 400px;
  height: 400px;
  border: 2px solid white;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 800px;
  perspective-origin: top right;
}

/* child elements, retain 3D transformation*/
.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
}

/* The surface of the cube, absolute positioning*/
.side {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  border: 2px solid white;
}

/* Cube face background color, helps visualize work*/
.front { background-color: #d50000; }
.back { background-color: #aa00ff; }

.left { background-color: #304ffe; }
.right { background-color: #0091ea; }

.top { background-color: #00bfa5; }
.bottom { background-color: #64dd17; }

Change surface

The front is the easiest. We move it forward by 100px:

 .front {
  background-color: #d50000;
  transform: translateZ(100px);
}

We can move the back of the cube backward by adding translateZ(-100px) . Another way is to rotate the side 180deg and move forward:

 .back {
  background-color: #aa00ff;
  transform: translateZ(-100px);

  /* or */
  /* transform: rotateY(180deg) translateZ(100px); */
}

Like the back, we can transform the left and right sides in several ways:

 .left {
  background-color: #304ffe;
  transform: rotateY(90deg) translateZ(100px);

  /* or */
  /* transform: translateX(100px) rotateY(90deg); */
}

.right {
  background-color: #0091ea;
  transform: rotateY(-90deg) translateZ(100px);

  /* or */
  /* transform: translateX(-100px) rotateY(90deg); */
}

The top and bottom are slightly different. We don't need to rotate them on the Y axis, we need to rotate them on the X axis. Again, it can be done in several different ways:

 .top {
  background-color: #00Bfa5;
  transform: rotateX(90deg) translateZ(100px);

  /* or */
  /* transform: translateY(-100px) rotateX(90deg); */
}

.bottom {
  background-color: #64dd17;
  transform: rotateX(-90deg) translateZ(100px);

  /* or */
  /* transform: translateY(100px) rotateX(90deg); */
}

This gives you a 3D cube!

Feel free to try different perspective and perspective-origin options and see how they affect the cube. There is no "correct" value, and these values ​​vary by item, as they depend on the animation, the size of the object, and the effect you want to achieve.

Let's talk about transform-style

We'll add some nice animation to the cube, but let's first discuss transform-style attribute. I added it before in generic CSS but it doesn't really explain what it is or what it does.

transform-style attribute has two values:

• flat (default value)
• preserve-3d

When we set the property to preserve-3d , it does two important things:

1. It tells the cube's face (child elements) to be in the same 3D space as the cube. If it is not set to preserve-3d , the default value is flat and the face is flattened on the plane of the cube. preserve-3d "copy" the perspective of the cube to its child elements (faces) and allows us to rotate only the cube, so we don't need to animate each face separately.
2. It displays child elements according to their position in 3D space, regardless of their position in the DOM.

There are three squares in this example – green, red, and blue. The translateZ value of the green square is 100px, which means it is in front of other squares. The blue square has a translateZ value of -100px, which means it is behind other squares.

But in the DOM, the order of squares is: green, red, blue. So when transform-style is set to flat (or not set at all), the blue square will be displayed at the top and the green square will be behind because that's the order of the DOM. However, if we set transform-style to preserve-3d , it will render according to its position in 3D space. As a result, the green square will be in front and the blue square will be in back.

Animation

Now, let's animate the cube! To make things more interesting, we add animations to all three axes. First, we add the animation property to .cube . It won't do anything yet, because we haven't defined the animation keyframe yet, but when we do it, it's in place.

 animation: cubeRotate 10s linear infinite;

Now is the keyframe. We basically want to rotate the cube along each axis so that it looks like it is rolling in space.

 @keyframes cubeRotate {
  from { transform: rotateY(0deg) rotateX(720deg) rotateZ(0deg); }
  to { transform: rotateY(360deg) rotateX(0deg) rotateZ(360deg); }
}

perspective property is actually an attribute that gives the animation depth, just like we see the cube scroll left and right, and forward and backward.

But before that, the values ​​of perspective attribute were consistent, and so was perspective-origin . Let's see how changing these values ​​affects the appearance of the cube.

I've added three sliders to this example to help see how different values ​​affect the perspective of the cube:

• The slider on the left sets the value of perspective property. Remember, this value sets the distance to the object plane, so the smaller the value, the more obvious the perspective effect.
• The other two sliders refer to perspective-origin property. The right slider sets the origin on the vertical axis, from top to bottom, and the bottom slider sets the origin on the horizontal axis, from right to left.

Note that these changes may not be obvious when the animation is running, as the cube itself is rotating, but you can easily turn off the animation by clicking the Run Animation button.

Feel free to try these values ​​and see how they affect the appearance of the cube. There is no "correct" value, and these values ​​vary by item, as they depend on the animation, the size of the object, and the effect you want to achieve.

Next steps?

Now that you have the basics of perspective attributes in CSS, you can use your imagination and creativity to create 3D objects in your own projects, adding depth and fun to your buttons, menus, inputs and anything else you want to "give life to life".

At the same time, you can try to create complex structures and perspective-based animations to practice and improve your skills, such as this, this, this, and even this.

I hope you enjoyed reading this article and learning something new in the process! Feel free to leave a comment to let me know what you think, or if you have any questions about perspective or any other topics in this article, please leave me a comment on Twitter.

The above is the detailed content of How CSS Perspective Works. For more information, please follow other related articles on the PHP Chinese website!