The content of this article is to bring you about CSS to achieve 3D animation code examples, there is a certain reference value, there is a need for a friend can refer to it, I hope to help you!

First, animation properties

1. The transform – style: flat | preserve – in the form of 3 d animation

Flat: The default flat, i.e., no 3D effect

Preserve-3d: 3D display

This property must be enabled if 3D representation is to be used, with various prefixes of course.

(This property transforms a 2d div into a 3D space. Compare this property to the camera of a camera. The contents of the div will be fed back to you in 3D via the camera, and its children will enjoy the 3D effect.

2. The transform – origin: 50% 50%;

Rotate the axis around, the default is center, you can set left,right,top,bottom, also can set the value of the value, so you can adjust the axis around the rotation movement, such as turning pages, open doors and other actions.

(This is like your glasses, depending on the position)

3. The perspective view

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

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

This is a required property for 3D animation, if not added, the animation will become flat.

This property can also be applied to each element separately, so that natural elements only have their own view style.

4. Backface-visibility: hidden Specifies whether to hide the back of an element

Two, animation implementation

Below I use part of the code to actually illustrate the implementation of the 3D effect.

1. Flip the card

html

css

The effect

2. The cube

html

css

.box{ width: 500px; height: 500px; margin: 50px auto; border: 1px solid; perspective: 3000px; perspective-origin: -90% -160%; } .box ul{ width: 100px; height: 100px; position: relative; top: 200px; margin: 0 auto; transform-style:preserve-3d; } .box ul li{ width: 100px; height: 100px; text-align: center; line-height: 100px; font-size: 25px; color: white; position: absolute; Background: rgba (225,0,0,0.2); border: 1px solid black; transition: all 1s linear; } /* top */ li:nth-child(1){transform: translateY(-50px) rotateX(90deg); } .box ul:hover li:nth-child(1){ transform: translateY(-100px) rotateX(90deg); background: palevioletred; border: 0; border-radius: 50%; } /* back */ li:nth-child(2){transform: translateX(50px); } .box ul:hover li:nth-child(2){ transform: translateX(100px) rotateY(90deg); background: #92ecae; border: 0; border-radius: 50%; } /* below */ li:nth-child(3){transform: translateY(50px) rotateX(90deg); } .box ul:hover li:nth-child(3){ transform: translateY(100px) rotateX(90deg); background: #ff916a; border: 0; border-radius: 50%; } /* left side */ li:nth-child(4){transform: translateX(-50px) rotateY(90deg); } .box ul:hover li:nth-child(4){ transform: translateX(-100px) rotateY(90deg); background: greenyellow; border: 0; border-radius: 50%; } /* right */ li:nth-child(5){transform: translateZ(-50px); } .box ul:hover li:nth-child(5){ transform: translateZ(-100px); background: lightskyblue; border: 0; border-radius: 50%; } /* nth-child(6){transform: translateZ(50px); } .box ul:hover li:nth-child(6){ transform: translateZ(100px); background: #be46d8; border: 0; border-radius: 50%; } .box ul:hover{ transform: rotateX(9000deg) rotateY(5000deg); transition: all 100s linear; }Copy the code

The effect

3. The cuboid

html

css

*{ padding: 0; margin: 0; list-style: none; } .wutai{ width: 900px; height: 600px; border: 1px solid; margin: 0 auto; perspective: 1000px; perspective-origin: 50% 1%; } .wutai ul{ width: 100px; height: 300px; position: relative; margin: 0 auto; top: 150px; transform-style:preserve-3d; } .wutai:hover ul{ transform: rotateY(36000000deg); transition: all 1000000s linear; } .wutai li{ width: 100px; height: 300px; position: absolute; text-align: center; line-height: 300px; font-size: 30px; color: white; {} li: NTH - child (1) background: rgba (255,0,0,0.6); transform: rotateY(30deg) translateZ(200px); Child (2) {} li: NTH - background: rgba (0255,0,0.6); transform: rotateY(60deg) translateZ(200px); {} li: NTH - child (3) background: rgba (225225,0,0.6); transform: rotateY(90deg) translateZ(200px); Child (4) {} li: NTH - background: rgba (225,0,225,0.6); transform: rotateY(120deg) translateZ(200px); Child (5) {} li: NTH - background: rgba (0225225,0.6); transform: rotateY(150deg) translateZ(200px); Child (6) {} li: NTH - background: rgba (225,0,0,0.6); transform: rotateY(180deg) translateZ(200px); Child (7) {} li: NTH - background: rgba (225,0,225,0.6); transform: rotateY(210deg) translateZ(200px); {} li: NTH - child (8) background: rgba (0,0,225,0.6); transform: rotateY(240deg) translateZ(200px); Child (9) {} li: NTH - background: rgba (0225225,0.6); transform: rotateY(270deg) translateZ(200px); Child (10) {} li: NTH - background: rgba (225225,0,0.6); transform: rotateY(300deg) translateZ(200px); Child (11) {} li: NTH - background: rgba (225,0,225,0.6); transform: rotateY(330deg) translateZ(200px); Child (12) {} li: NTH - background: rgba (0225225,0.6); transform: rotateY(360deg) translateZ(200px); }Copy the code

The effect

4. Picture rotation

html

css

The effect

Summary:

In general, the main idea is to work with the various animation properties to distinguish between the main container and the animation elements you want to write. You can use timers to help load various class styles. The most important thing is to know your animation level and be clear to deploy everything you need to complete the animation.

If you think my article is good, pay attention to the collection oh!

3D animation more source code here oh interested friends can refer to it!

Liyingyingweb. Making. IO / 3 d – animatio…

We can discuss the front end problem together!

rgz987