Using CSS3 to realize merry effect

This article mainly introduced the pure CSS3 realizes merry effect, mainly uses the CSS3 technology to have: keyframes, perspective, Perspective-origin, transform (translate, rotate), Animation, Transform-origin, a small partner in need of reference

Pure CSS3 realizes a positive hexagon merry effect, record the learning situation of CSS3 animation, the effect is as follows:

The main use of the CSS3 technology are: keyframes, Perspective, Perspective-origin, transform (translate, rotate), animation, Transform-origin, Also add a bit of geometry knowledge (calculate the spacing, angle what), the detailed process is as follows:

First, design the layout to be displayed (top view), the vertical line in the way is the auxiliary line, the calculation of the offset is required:

The red box is the rotating surface (that is, the structure of the merry effect is ultimately rotated by the pivot point of the face), and six faces are based on the layout of the polygon, first look at the three faces below the red frame, the left side is originally in the Blue Line, through the rotation to reach the Green Line, the right side, The middle face only need to move in the direction of the z-axis of the square root three of the length of the distance can be, all the faces are offset and rotation through the structure of the way, it is necessary to ensure that the pattern of the surface (in this case, the use of text, the idea is consistent) to outward, such as the upper middle face, In the z-axis outward offset of the square root of the two three-side length of the distance after the center is also rotated by the midpoint of 180 °, all the surface is equally easy to get. One of the techniques to keep in mind in this process is: in the three-dimensional coordinate system, starting from the coordinates origin, toward the square of the axis to see, counter-clockwise rotation when the value of rotate (x/y/z) is positive, clockwise rotation, rotate (x/y/z) value is negative.

Set the structure: a 3D scene, a merry rotation surface, and a merry of six faces:

<p class= "Wapper" >        <!--scenes--    <p class= "Rotate" >   <!--containers--        <p class= " Item ItemOne >1</p>  <!--six-to        <p class= "Item Itemtwo" >2</p>        <p class= " Item Itemthree ">3</p>        <p class=" Item Itemfour ">4</p>        <p class=" Item Itemfive ">5 </p>        <p class= "Item Itemsix" >6</p>    </p>        </p>

To set up a 3D scene:

. wapper{    -webkit-perspective:800;    /* Observation distance 800*/    -webkit-perspective-origin:50% -100%;    /* View diagonally downward from the front (straight) */    width:400px;    height:300px;    margin:100px Auto;}

To set the revolved face:

@-webkit-keyframes rotation{      /* Animation process *    /0%{-webkit-transform:rotatey (0deg);}        100%{-webkit-transform:rotatey ( -360DEG);}}. rotate{    -webkit-transform-style:preserve-3d;     /*3d Transform */    -webkit-animation:rotation 6s Infinite;  /* Animated name, time, looping animation */    -webkit-animation-timing-function:linear;  /* Constant Animation */    -webkit-transform-origin:center;      /* Rotate along the middle */    width:100%;    height:100%;    position:relative;   /* Relative positioning layout */}

Set the general style to six faces in addition to the position:

. item{   -webkit-transform-origin:center;  /* All rotate along center */   width:198px;   height:300px;   Position:absolute;   /* Absolute positioning on the rotating surface */   Background:none;   Text-align:center;   line-height:300px;}

Set the position of the six faces separately, taking a number as an example (the polygon labeled on the left Green line below the red box in the structure chart above), all the values need to be computed by geometry:

. itemone{    left:-50px;    -webkit-transform:translatez (87px) Rotatey ( -60deg);  /*z the axis outward 87px, rotates along the y-axis -60°*/    background: #f00;}

The animation stops when the mouse hovers over the structure:

. rotate:hover{    -webkit-animation-play-state:paused;  /* Set Animation status */}

This example can only be viewed in the browser of the WebKit kernel, if you want to be compatible with other modern browsers, you need to add-moz-and other prefixes, the complete code is as follows:

<! DOCTYPE html>
is not very cool effect, small friends, CSS3 is really a good thing, you deserve to have.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!