Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve 3D door opening animation effect in CSS3. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article. This article will explain in detail how to realize the 3D door opening animation effect of CSS3. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

First, the realization of CSS3 single door 3D door opening effect.

The effect is as follows:

The sound effect of opening the door is even better!

You can click here: CSS3 3D transformation to achieve the sound effect of single door demo

The key to the realization of door opening effect

1. Set the perspective viewing distance on the container element

The schematic CSS code is as follows:

.door-frame {perspective: 1200px;} 2. Transform-style is set to 3D transform

Our door needs to be set to a 3D transformation style, otherwise the effect will be flat and stiff, and the back will not be visible to meet the reality.

The schematic CSS code is as follows:

.door {transform-style: preserve-3d; backface-visibility: hidden;} 3. RotateY transform to realize door opening and closing effect

At this point, we only need to change the rotateY transformation angle value of the door element through CSS or JS, and the door opening and closing effect will be available.

For example, the single door opening effect above is turned off by default, and the rotateY angle is 0deg and the right door is opened at the same time, so you can set transform-origin to left, that is, the left edge of the door is the axis:

.door {transform: rotateY (0deg); transform-origin: left;}

When the door is fully open, the angle is 90 degrees, and CSS is expressed as:

.door {transform: rotateY (- 90deg);}

The effect is realized, and the core is as simple as that.

If the understanding is still a bit foggy, you can refer to my previous highly visited article: "all right, CSS3 3D transform transformation, but that's it!"

Difficulties in realizing the effect of opening the door

In fact, as far as the final effect is concerned, the difficulty is not the opening and closing of the door itself, but the realization of the 3D effect of the door, which is essentially a cube effect, but the cube is relatively flat.

My technique for implementing the CSS3 cube effect is as follows:

Do you still remember how we changed from a 2D plane to a 3D cube when we played origami when we were young?

My implementation steps are the same, first of all, to achieve a good plane effect, the diagram is as follows (since it is a half-open door, we only need 4 faces):

Then, the brain complement spatial structure, in order to become a 3D effect, the upper edge needs to be folded 90 degrees along the horizontal line beyond the visual direction, and the right side folds 90 degrees along the vertical line.

This kind of action is described as rotateX (90deg) and rotateY (90deg) in CSS 3D transformation language.

Because the default center of the transform transformation of an element in CSS is the center, it is not enough to rotate directly above. Either we change the transform-origin position, or the center of the element is offset ahead of time to the transform axis on the edge of the door.

So, three or two times, we have a 3D effect. For details, please refer to the source code of the demo page for a good case study.

Second, the realization of CSS3 double-door 3D door opening effect.

The door of the office or study is a single door, while the door of the Shenfu courtyard is double, such as the door in the famous pupil animation Conan.

Since the single-door effect can be achieved, the double-door effect is fine. The effect is as follows:

Similarly, the above screenshot video has no sound effect. To really feel the impact of opening the door, you can click here: CSS3 3D transformation to achieve the sound effect of two-door door opening demo

The realization principle is more or less the same as the effect of the above single door, so I won't repeat it.

The door opening animation here is completely realized by using CSS3 transition transition, which is different from the beginning of demo, where demo is realized by timer constantly changing the angle of rotateY. It's all right, depending on what you need.

This is the end of this article on "how to achieve 3D door animation in CSS3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.