• CSS is magic, its time you try 3D
  • Author: Ankita Chakraborty
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: tong – h
  • Proofreader: Chorer PassionPenguin

CSS is magic, and it’s time to try 3D

CSS Transform is one of the most versatile and magical properties of CSS. Not only is it the best way to achieve smooth animation on your site, it’s a way for you to work wonders. Take this 🙀 —

I apologize in advance for the few giFs that took up your Internet broadband, but I hope it was worth it! 🤜 🤛

Wait, two sides of the cube are missing!!

I did it on purpose, so it would be more graphic and easier to understand. I’ll add a link at the end of this article to get the full code for the above example!

First things first, how does Translate work?

The translate method basically moves an HTML element from its true position without interfering with other siblings or parents in the layout tree. In simple terms, the translateX method is to move an element left or right, while translateY is to move an element up or down.

But what’s the z-axis?

To get a better idea of how Translate works along the Z-axis, imagine that your div moves back and forth across your screen instead of up and down or left and right.

How is that possible? A website looks like a page from a book, right? How could something come out of the screen and move towards you (or away from you)?

Your div won’t actually run out, of course, but it gives you the feeling that it will. Let’s see what happens when we change the value of Translate along different axes.

I don’t know about you, but this green box doesn’t look like it’s getting close or away from me. 👺

How to solve this problem? We need to change our perspective. 😉

The Perspective property of CSS

If you don’t set the correct Perspective value, you won’t be able to visually detect a z-axis change.

The Perspective attribute defines the distance between the element and the user. Then, a lower value will produce a stronger 3D effect than a higher value.

Source — W3 Schools

Let’s add the following CSS to the parent element of the three squares

Lo:

The rotate method

Rotate, as the name suggests, rotates an element along an axis at a given Angle. But we need a little bit of visuals to show how Rotate works along different axes.

The cube

We can finally start with the face of the cube! We’ll have four sides — bottom, front, back, left:

Similarly, I added some CSS to the main box-wrapper container.

Note that I added transform-style: preserve-3D to the container, which is an important step in rendering 3d child elements. Each face is 200px wide and high, and we need to keep this in mind because we will translate each face according to its size.

Each face of the cube will be an absolute division, and I added text to represent each face. I added opacity: 0.5 for each side so you can clearly see the overlap between them.

To put front in front, we add translateZ(100px) to it.

Yeah, it looks like this. 🙁

So how do we make it 3D? This is where our perspective knowledge comes in handy.

Add this CSS to the parent element box-container:

Again, to call back, we’ll add the opposite CSS to front.

Effect –

Can you imagine the front coming towards you and the back (the yellow one) moving away from you? If that’s still not enough, let’s try spinning the container around the cube:

It’s amazing, right?

Next, we need to settle the bottom 💁♀️. In order to put the bottom in place, we rotate it ** 90 degrees ** along the X-axis.

We also need to move it so that it’s right between the front and back of the cube. What we can do is move the bottom so that it’s consistent with the front, and then rotate it. Sounds a little confusing, right?

Step 1: Align the bottom and front

CSS:

Effect:

Step 2: Rotate bottom 90 degrees

CSS:

Result:

Bottom looks safe in its place now. But Left seems to be stuck in the middle. 🙍♀️ First we need to move it to the side and rotate it. Let’s move it -100px along the X-axis, and then rotate it on the Y-axis.

CSS:

Effect:

Look! We’re almost done with our approximation of the cube. I suggest you try adjusting the translate and rotate values on each axis and try adding the top and right sides to make a full cube.

Now, for the final critical step, rotate our cube 😍

CSS:

Add the above animation to our box-wrapper

Effect of 🤜 🤛 :

For the same working code, see [GitHub repository]](github.com/ankita1010/… CSS 3D this magic pool. 💫

Note that I adjusted the value of the perspective and added some animation to get to the final position of the side to show the changes more clearly. I rotated the box-wrapper slightly to make it more visible from the right Angle.

Cheers!

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.