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

Editor to share with you how to use CSS3 to achieve 3D animation, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

I. Animation attributes

1.transform-style: flat | form of preserve-3d animation

Flat: default plane, that is, no 3D effect

Preserve-3d:3d effect display

If you want to use 3D representation, this attribute must be enabled, of course, pay attention to the attribute with a variety of prefixes.

(this attribute can change a 2D div into 3D space, and compare this attribute to a camera. The content in this div will be fed back to you in 3D form through the camera, and its child elements will enjoy 3D effects, while elements below child elements will not have 3D effects. )

2. 50% transformMutual payment 50%

Rotation movement around the axis, the default is the center, you can set left,right,top,bottom, you can also set values, so you can adjust the axis around rotation movement, such as turning the page, opening the door and other actions.

This is equivalent to your glasses, and the effect will be different with different positions.

3.perspective perspective

The smaller the value is, the closer the perspective distance is, the more obvious the effect is.

This attribute is the distance between the element that defines the 3D transformation and the view, that is, the perspective distance. This attribute should be added to the view element (the parent element of the transformation element).

This is a necessary attribute for 3D animation, and if you do not add this attribute, the animation will become a flat effect.

It is generally used on the stage element, that is, the container, so that the animation elements used in the container use a perspective, this attribute can also be used separately in each element, and the natural element only presents its own perspective style.

Whether 4.backface-visibility:hidden hides the back of the element

2. Realization of animation

Let me use some of the code to actually explain the implementation of the 3D effect.

1. Card flip

Html

Web Front-end getting started to practice: CSS3 to realize 3D Animation

Css

Web Front-end getting started to practice: CSS3 to realize 3D Animation

Effect.

two。 Cube

Html

Css

Effect.

3. Cuboid

Html

Web Front-end getting started to practice: CSS3 to realize 3D Animation

Css

Effect.

4. Picture rotation

Html

Css

Effect.

The above is all the contents of the article "how to use CSS3 to achieve 3D Animation". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.