Detailed example of 3D flop effect of css3 special effects

this article mainly introduces the 3d flop effect of css3 special effects. it has certain reference value. interested friends can refer to it. i hope it will be useful to you. help!

i have been learning css3 recently and found that he is really getting better and better. today's css3 is no longer the previous css, and the functional effects it can produce are beyond our imagination. it can implement flash, can create some effects that can be produced by js, and can also write some effects such as gradients, rounded corners, shadows, etc. made by ps. it is so dazzling that i believe many people have already done it. let’s study it more deeply, haha. i also studied it a little today, mainly about some of its 3d effects. i have never been unclear about 3d. i just have time to study it today. .

the so-called 3d flop effect is actually two pictures, one picture is in front and one picture is in the back. when the picture in front is rotated, when it is turned to a certain angle, the picture behind it will rotate with its pace. it is just that one of the pictures is rotated until it is invisible, and the other picture is just about to turn. you can see it. are you impatient? come and learn with me, haha~@@@

first of all, we have such a layout in html:

<p class="outer">
    <p class="p1"></p>
    <p class="p2"></p>
</p>

don't underestimate the p outside, it but this content is indispensable. without it, the subsequent effects cannot be achieved! after the layout is laid out, the next step is to start working on the style. the first thing to do is definitely the outside. give it a width and height. you can decide it yourself. i will give it a width and height of 200*200 first. now that the outside stuff is done, the inside stuff is about to start. here we give 200*200. at this time, when i look in the browser, i find that p1 and p2 are displayed up and down, one up and one down. this is correct. you must know that p is a block element and it takes up a whole line, but this is not true for what we said before. there must be a contradiction between the front and back. don't worry, give it an absolute position: absolute; so that the centers of the two p's coincide. in order to distinguish the two p's, here we have to give them different background colors. the preliminary preparation work is almost done, now let’s see how to achieve the effect!

we are trying to achieve a flop effect. as soon as you hear it, you will know that there must be rotation. yes, this requires the use of the new attribute transform:rotatey(?deg) in css3; some people may ask why it is rotatey, but you don’t know. flip, of course, rotates along the y axis. ha ha! so when the mouse moves to p, we have to let it achieve the rotation effect. then the use of the outer p comes. no matter which small p is used, they cannot rotate at the same time unless our mouse is clicked outside. on that p, there is this code,

.outer:hover .p1{
            transform:rotatey(-180deg);
        }
        .outer:hover .p2{
            transform:rotatey(0deg);
        }

rotation is there, but rotation without any transition effect looks ugly, so here, we have to give them a transition effect , you need to use the new attributes in css3transition:all 2s; all here means that all its effects are transitioned. speaking of this, we have actually not dealt with one thing, that is, how to rotate the current one to the back, and the latter one will appear immediately after it. this is backface-visibility:hidden; a very important attribute in image transformation. , it means that when the picture moves to an invisible place on the display screen, it disappears. that is to say, we can see it when it is originally front-facing, but when it rotates 180 degrees along the y-axis, we can no longer see it. if we do not add this attribute, we can see the reverse image after rotation. it will no longer be visible. so we're going to add this attribute to the two small p's. and in order to achieve this effect, we have to make one of the two small p's not rotated at the beginning. we can see that the other one, which is the one behind, is rotated 180 degrees, so that when the first p starts to rotate, we you will not see the second p immediately, but wait until it rotates to a place where it cannot be seen, and then the second p will appear. the specific code is as follows:

<html><head>
    <title>3D翻牌效果 </title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="jquery.js"></script>
    <style type="text/css">
        .outer{
           width: 510px;
            height: 340px;
            border: 1px red solid;
            margin: 0 auto;
        }
        .outer p{
           width:510px;
            height: 340px;
            position: absolute;
              transform-style: preserve-3d;
             backface-visibility:hidden;
            transition:all 2s;
        }
        .p1{
           background: url("images/1.jpg");
            transform:rotateY(0);
        }
        .p2{
            background: url("images/2.jpg") no-repeat;
            transform:rotateY(-180deg);
        }
        .outer:hover .p1{
            transform:rotateY(-180deg);
        }
        .outer:hover .p2{
           transform:rotateY(0deg);
        }
    </style></head><body><p class="outer">
    <p class="p1"></p>
    <p class="p2"></p></p></body></html>

the above is the main content of this article, i hope it can help everyone.

【recommended tutorials】

1. css video tutorial
2. css online manual
3. bootstrap tutorial