Examples of css3d+ animations (complete code included)

This article brings you the content is about the Css3d+ animation example (with complete code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Objective

Recently played with CSS to build 3D effects, wrote a few demo, so blog summary. Before reading this blog, please understand the properties of CSS 3D, for example: Transform-style,transform-origin,transform, Perspective.

Write a simple cube

1, we first use CSS to implement a box, a box has 6 sides, we write 6 Li, and wrapped up with a UL, according to my experience in writing 3D animation, it is best to have a parent element to wrap

<p class= "Parent" >    <ul>        <li>1</li>        <li>2</li>        <li>3 </li>        <li>4</li>        <li>5</li>        <li>6</li>    </ul> </p>

2. Set the width height for the. Parent and set the distance and base point position for him.

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

3, to the UL set wide height and preserve-3d attributes to retain the child element 3d conversion, sub-element Li all absolute positioning

        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 follows:

4, first write a face, give his background settings 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 follows:

5, we have written the first face, and then we have the other 6 faces adjusted well, into the show. About rotate the direction of rotation is not explained here, a friend who does not understand can view other documents on their own.

        /* above */         Li:nth-child (1) {            Transform:translatey ( -50px) Rotatex (90deg);        }         /* below */        Li:nth-child (2) {                    transform:  translatey (50px) Rotatex (90deg);        }        /* Left */        Li:nth-child (3) {            Transform:translatex ( -50px) Rotatey (90deg);        }        /* Right side */        Li:nth-child (4) {            Transform:translatex (50px) Rotatey (90deg);        }        /* Front *        /Li:nth-child (5) {            Transform:translatez (50px);        }        /* Back *        /li:nth-child (6) {            Transform:translatez ( -50px);        }

The effect is as follows:

Here are the effects of two css3d+ animations

1, the code is as follows:

<! DOCTYPE html>
  2, the code is as follows:  
 

<! DOCTYPE html>
Effects such as: