Hello, bean skin powder, I come, this time to get a copy from bytedance “Milan’s little blacksmith”, a few lines of CSS let your page three-dimensional, the article written by shallow to deep, there are examples of code can learn 😘.

Author: a young blacksmith in Milan

Source: Original

Let’s start with a simple example we use in our product:

1. Normal rotation

Css3’s transform property can be used to visually deform elements, including the Rotate property:

Codepen. IO /mongooseson…

RotateX, RotateY and RotateZ rotated 360° are shown here, but the effects are flat and may not be easy to understand. In the following we combine the dynamic effect of stereo to elaborate.

2. Rotation of solid

Only one line of CSS has been added:

Codepen. IO /mongooseson…

In fact, we only added one line of perspective:800px.

So what do you mean by perspective?

The official explanation is: Perspective specifies the distance between the observer and the plane Z =0, so that elements with three-dimensional position transformation can have a perspective effect. We can think of it very simply as the distance from the screen to the container of 3D elements. The smaller the perspective, the closer the 3D you see on the screen, and the larger the perspective, the farther away it is. When this property is present, it means that all children of the element are solid.

By default, the center of the element is used as the landing point, which means you are looking directly at the center of the element. If you need to change your perspective, you can use the property-origin attribute.

3. Browser coordinate system

The question I have to ask is, how do RotateX, Y, and Z rotate?

For the browser coordinate system, horizontally to the right is the positive X axis, vertically down is the positive Y axis, and vertically out of the screen is the positive Z axis.

For example, transform: rotateX(45DEg) means the center of rotation is the X-axis, rotated 45 degrees clockwise. If the parameter is negative, it is counterclockwise. In recognition, we can use the left hand rule, which means that the left thumb points in the positive direction of the corresponding axis and the other fingers bend clockwise.

To make it easier to understand, I found two pictures to illustrate

Our left hand is facing the positive direction of X axis, and our fingers are bending toward the positive direction of Y axis, so it can be inferred that the effect of rotation of 45 degrees is:

Tip: Don’t use the left hand rule in front of your colleague, and if you do, don’t use the Y axis. If you do use it, please let me know if the hospital’s Wi-Fi is good. So you can understand the RotateX, Y and Z used in the above dynamic effects, and the reason why RotateZ can’t produce 3D effects.

4. Flip effect

Like the flip card effect mentioned in the beginning, how to achieve it?

As stated above, perspective applies to child elements, so we need an extra Container with two divs representing the front and back.

  • Card Public attributes

Obviously, position: absolute must be specified on both sides of the card so that the cards are stacked together. You also need to specify, the second important property of this article, backface-visibility:hidden, which is very well understood.

When rotateY(180deg) is specified for an element, the left hand rule dictates that the front of the element faces in and the back faces us. If we specify this property, the element facing away from us is no longer visible.

  • Card face

No special processing is required on the front of the card.

  • On the back of the card

Specify transform: rotateY(180deg).

  • CARDS block

We need to add the transition:transform attribute to the cards block to increase the animation effect. We also need to use the third attribute transform-style: preserve-3d.

This property indicates that all the children of the element are in 3D space and have a three-dimensional hierarchy and overlay relationship, which is necessary if your container element has multiple elements involved in overlapping 3D transformations.

  • The container block

Obviously, we need to add the transition:transform attribute to the container to increase the animation effect. We also need to use the third attribute transform-style: preserve-3d.

This property indicates that all the children of the element are in 3D space and have a three-dimensional hierarchy and overlay relationship, which is necessary if your container element has multiple elements involved in overlapping 3D transformations.

A simple example

Codepen. IO /mongooseson…

5. Three-dimensional Rubik’s Cube

As you may have noticed, the webPack logo is actually hand-written in CSS, so we’ll finish by talking about how to combine existing properties to make a cube rotate.

On the first Demo: codepen. IO/mongooseson…

  • HTML format

    Similar to the card effect, our HTML format looks like this

  • Parent component style

    As with the cards, we need to set the 3D view attribute for the outer cubes and the outermost Container

Here we set the side length of the cube to 200px and observe it with a distance of 400px

  • Draw six sides

If you have played the Rubik’s cube, you may know that in order to record the rotation of the Cube, we usually name the six sides of the cube as front, back, left, right, up and down:

With the exception of the forward side, which does not need to be modified, the other sides can be considered as the result of various rotations of the forward side

Rear: Rotate 180deg clockwise along the Y axis

Left: 90deg counterclockwise along the Y axis (think about why it’s counterclockwise)

Right: rotate 90deg clockwise along the Y axis

Up: rotate 90deg clockwise along the X axis

Next: rotate 90deg counterclockwise along the X axis

We can mark different faces with background color and pattern to distinguish them. At this time, the six faces are still crossed together, and we also need to adjust the “position”

  • Combine six sides

In the Demo, we set the side length of the cube as 200px, but the center of the six overlapping faces is still located in the center of the cube, so we need to set translateZ(100px) for each face to make the cube position correct

  • Draw the dynamic effect

Then it’s easy. We can draw any dynamic effect on the cube, and if we’re interested, we can even further draw the shuffling and reduction process like the Rubik’s cube.

6. Practical scenarios

Using CSS to achieve 3D effects is not a new technology in browsers, but it is still rarely used in actual products. Appropriate motion effects can improve product experience, while complex motion effects will bring aesthetic fatigue and development burden. WebGL, D3.js, etc., are great things, but they are expensive to learn and expensive to develop, require a lot of effort to see real returns, and have few application scenarios. So if you want to get rid of the boring add, delete, change and check in 2B scenario and the boring interaction of H5 in 2C scenario, you might as well use CSS 3D with very low cost

The  End

Refer to the link

A few lines of CSS make your page solid