Example of css3D+ animation (complete code attached)

This article brings you examples of css3D animation (complete code attached), which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Preface

I recently played around with using CSS to create 3D effects and wrote several demos, so I will summarize them in this blog. Before reading this blog, please first understand the properties of css 3D, such as: transform-style, transform-origin, transform, perspective.

Write a simple cube

1. We first use css to implement a cuboid. A cuboid has 6 sides. We write 6 li and wrap it with an ul. According to My experience in writing 3D animation is that it is best to have a parent element to wrap

• 1
• 2
• 3
• 4
• 5
• 6

2. First set the width and height for .parent, and set the viewing distance and base point position for it.

.parent{ width: 800px; height: 400px; border: 1px solid #000; margin: 0 auto; perspective: 2000px; perspective-origin: -40% -80%; background: #000; }

3. Set the width, height and preserve-3d attributes of ul to retain the 3D transformation of the sub-element. All sub-elements li are absolutely positioned

ul{ width: 50px; position: relative; margin: 100px auto; transform-style : preserve-3d; } li{ width: 100px; height: 100px; background: rgba(255, 255, 0, 0.3); position: absolute; text-align: center; border: 3px solid greenyellow; }

The effect is as shown below As shown:

4. First write a face and set background for its background: rgba(255, 255, 0, 0.3 );

li:nth-child(1){ background: rgba(255, 255, 0, 0.3); transform: translateY(50px) rotateX(90deg); }

The effect is as shown below:

5. We have written the first face, and then we adjust the other 6 faces to become as shown in the picture below. The rotation direction of rotate will not be explained here. Friends who do not understand can check other documents by themselves.

/*上面*/ li:nth-child(1){ transform: translateY(-50px) rotateX(90deg); } /*下面*/ li:nth-child(2){ transform: translateY(50px) rotateX(90deg); } /*左面*/ li:nth-child(3){ transform: translateX(-50px) rotateY(90deg); } /*右面*/ li:nth-child(4){ transform: translateX(50px) rotateY(90deg); } /*前面*/ li:nth-child(5){ transform: translateZ(50px); } /*后面*/ li:nth-child(6){ transform: translateZ(-50px); }

The effect is as shown below:

##The following are the effects of two css3D animations

1. The code is as follows:

nbsp;html>      
 
 
 
 

2. The code is as follows:

nbsp;html>      
 

The effect is as follows:

Related recommendations:

How to achieve style effect css when the web page is loaded? (Multiple style examples)

How to use pure CSS to realize a smiling and meditating little monk

How to use css attributes to add font shadow effect ? (code demonstration)

The above is the detailed content of Example of css3D+ animation (complete code attached). For more information, please follow other related articles on the PHP Chinese website!