CSS implementation of 3d animation effects code example

This article brings the content is about the CSS implementation of 3d animation effects code examples, there is a certain reference value, a friend can refer to the need, I hope you have some help.

First, let's take a look at

1.1.1

Property

Perspective: Through distance, unit pixels (the smaller the value, the closer the perspective distance, the more obvious the effect): Set the parent element

Perspective-origin: Setting the position of a pivot point

Transform-style: Specifies that the child element of an element is in a three-dimensional space, value: Flat | Preserve-3d

1.1.1 Ideas

(1) There are three p, put together in a box.

  <p class= "Container" >            <p class= "Cube" >                <p class= "Mian mian1" ></p>                <p class= " Mian mian2 "></p>                <p class=" Mian mian3 "></p>            </p>        </p>

(2) Set the style for its box

. cube{        width:200px;        height:300px;        transform-style:preserve-3d;        margin:100px Auto;               position:relative;        Transform:rotatex (30deg);        border-radius:50%;            padding:60px;    }

(3) Set the style for each p

. mian{        width:200px;        height:300px;        Background-image:url (1.jpg);        background-position:400px 0;        Position:absolute;        Background:url (aka.jpg);        border:1px solid #ccc;        transition:2s;    }    /*. mian1:hover{        transform-origin:right;        Transform:rotatey ( -60deg);    } * *    . mian1{        transform-origin:right;        Transform:translatex ( -200px) Rotatey (45deg);        background-position:0 0;    }    . mian2{        background-position:400px 0;    }    . mian3{        Transform-origin:left;        Transform:translatex (200px) Rotatey (45deg);        background-position:200px 0;    }

(4) Animate it

. mian3:hover{        Transform:translatex (200px) Rotatey (0deg);    }     . mian1:hover{        Transform:translatex ( -200px) Rotatey (0deg);    }

1.1.1 Source code:

<! DOCTYPE html>
1.1.2


1.1.2 Ideas:

(1) There are five p, respectively put five words.

  <p id= "box" >        <p class= "Ze1" > Front </p>        <p class= "Ze2" > End </p>        <p class= "Ze3" > Small </p>        <p class= "Ze4" > Learn </p>        <p class= "Ze5" > Students </p>    </p>
(2) Set the style for box and p overall

#box {        margin:100px auto;        font-size:100px;        Color: #005aa0;        Text-align:center;    } . ze1,.ze2,.ze3,.ze4,.ze5{        Display:inline-block;        width:90px;        height:100%;        position:relative;    }
(3) Setting pseudo-elements before and after

  . ze1:before,.ze2:before,.ze3:before,.ze4:before,.ze5:before{        content:attr (data);        Position:absolute;        Color: #ffffff;        top:0;        left:2px;        Transform-origin:left;        Transition:transform. 5s;    }    . ze1:before{        content: "former";    }    . ze2:before{        content: "End";    }    . ze3:before{        content: "Small";    }    . ze4:before{        content: "Learning";    }    . ze5:before{        content: "Raw";    }    . ze1:after,.ze2:after,.ze3:after,.ze4:after,.ze5:after {        position:absolute;        Color: #b3b3b3;        top:3px;        left:10px;        Z-index:-1;        Transform-origin:left;        Transition:transform. 5s;    }    . ze1:after{        content: "former";    }    . ze2:after{        content: "End";    }    . ze3:after{        content: "Small";    }    . ze4:after{        content: "Learning";    }    . ze5:after{        content: "Raw";    }
(4) Animate it

. ze1:hover:before,.ze2:hover:before,.ze3:hover:before,.ze4:hover:before,.ze5:hover:before{        Transform: Rotatey ( -40deg) skewy (10deg);    }    . ze1:hover:after,.ze2:hover:after,.ze3:hover:after,.ze4:hover:after,.ze5:hover:after{        Transform:rotatey ( 40DEG) Skewy (10deg);    }
1.1.2 Source:

<! DOCTYPE html>

1.1.3 ideas do not write, only write the source code

1.1.3 Source:

  <! DOCTYPE html>




. ak. sj2{width:10px;    height:10px;    margin-top:5px;    Background: #fff; border-radius:5px;} @keyframes mi{0%{transform:rotate (0deg)} 100%{transform:rotate (720deg)}} @keyframes ol{0    %{transform:rotate (0deg)} 100%{transform:rotate (720deg)}}.mian{width:240px;    height:240px;    border:1px solid #ccc;    Position:absolute;    border-radius:120px;    top:195px;    left:575px; Animation:af 5s infinite Linear;}.    Mian. ap{width:10px;    height:10px;    border-radius:5px;    Background: #f0f; margin:30px 0 0 30px; } @keyframes af{0%{transform:rotate (0deg)} 100%{transform:rotate (720deg)}}.chen{width:1    60px;    height:160px;    border:1px solid #ccc;    Position:absolute;    border-radius:80px;    top:235px;    left:615px; Animation:oa 4s infinite linear;}.    ze{width:10px;    height:10px;    border-radius:5px;    Background: #0c0; margin:20px 0 0 15px;} @keyframes oa{0%{transform:rotate (0deg)} 100%{transform:rotate (720deg)}}.yu{width:80p    X    height:80px;    Background-color:darkorange;    border-radius:40px;    Position:absolute;    top:275px;    left:655px;        Opacity:. 7;} </style>