Implement 3D flop with pure CSS

CSS 3 continues the case study of CSS. Today we will look at the effect of a pure CSS 3D flop.

For the simple effect, please click here for online experience or download to favorites.

To improve the effect, please click here for online experience or download to favorites.

In the html section, we use the flip class to flip the box. The x and y classes represent vertical flip and horizontal flip respectively. Front and back divs are used to flip the front and back sides of the image.

Well, let's look at CSS. First, we need to layout elements.

/* Top Box */. container {width: 1320px; margin: 50px auto;}/* flip style */. flip {width: 640px; height: 320px; margin: 10px; float: left; position: relative;}/* Common styles of the two classes */. flip div {width: 100%; height: 100%; position: absolute; left: 0; top: 0; box-shadow: 2px 2px 20px rgba (, 0 ,. 5);}/* use of the prompt text: The before pseudo object is in place */. flip div: before {content: attr (data-text); width: 100%; height: 30px; position: absolute; left: 0; bottom: 0; line-height: 30px; text-align: center; color: # fff; background-color: rgba (0, 0 ,. 3);}/* set the background image of the first and second classes, vertical position */. flip div. front {background: url (http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg); z-index: 1 ;}. flip div. back {background: url (http://thecodeplayer.com/uploads/media/40Ly3VB.jpg); z-index: 2 ;}

Then we need to let flip respond to the hover event and add transform and transition

/* Flip style */. flip {/* Other Code omitted * // * sets the depth of field */perspective: 1000px;}/* Common styles of the two classes */. flip div {/* Other Code omitted */transition: all 1 s lower; transform-style: preserve-3d; backface-visibility: hidden;}/* vertical position after hover */. flip: hover div. front {z-index: 2 ;;}. flip: hover div. back {z-index: 1;}/* rotateY response */. Y div. back {transform: rotateY (180deg );}. y: hover div. front {transform: rotateY (180deg );}. y: hover div. back {transform: rotateY (0deg);}/* rotateX response */. X div. back {transform: rotateX (180deg );}. x: hover div. front {transform: rotateX (180deg );}. x: hover div. back {transform: rotateX (0deg );}

All right, easy to use! Next we slider in advance and click play next image to see the effect here. This effect uses the input single statement to implement click events.

The CSS part should also be improved.

.gallery { }.gallery input {    display:none;    position:absolute;}.container {    position: relative;    height:640px;    width:320px;    transition: 1.5s ease-in-out;}.container div {    position:absolute;    left:0;    top:0;    width:640px;    height:320px;    transition: 1.5s ease-in-out;    border:1px solid #888;    backface-visibility: hidden;    -webkit-perspective: 1200px;}.container div.front {    transform: rotateY(180deg);}.container div.back {    transform: rotateY(0deg);}.container label {    display:block;    width:640px;    height:320px;    position:absolute;    left:0;    top:0;    display:none;    cursor:pointer;}input:nth-of-type(2n):checked ~ .container div.front {    transform: rotateY(0deg);}input:nth-of-type(2n+1):checked ~ .container div.front {    transform: rotateY(180deg);}input:nth-of-type(2n):checked ~ .container div.back {    transform: rotateY(-179.9deg);}input:nth-of-type(2n+1):checked ~ .container div.back {    transform: rotateY(0deg);}#p1:checked ~ .container label:nth-of-type(2) {    display:block;}#p1:checked ~ .container div.front {    background:url(http://thecodeplayer.com/uploads/media/8k3N3EL.jpg);}#p1:checked ~ .container div.back {    background:url(http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg);}#p2:checked ~ .container label:nth-of-type(3) {    display:block;}#p2:checked ~ .container div.front {    background:url(http://thecodeplayer.com/uploads/media/40Ly3VB.jpg);}#p2:checked ~ .container div.back {    background:url(http://thecodeplayer.com/uploads/media/8k3N3EL.jpg);}#p3:checked ~ .container label:nth-of-type(4) {    display:block;}#p3:checked ~ .container div.front {    background:url(http://thecodeplayer.com/uploads/media/40Ly3VB.jpg);}#p3:checked ~ .container div.back {    background:url(http://thecodeplayer.com/uploads/media/00kih8g.jpg);}#p4:checked ~ .container label:nth-of-type(5) {    display:block;}#p4:checked ~ .container div.front {    background:url(http://thecodeplayer.com/uploads/media/2rT2vdx.jpg);}#p4:checked ~ .container div.back {    background:url(http://thecodeplayer.com/uploads/media/00kih8g.jpg);}#p5:checked ~ .container label:nth-of-type(1) {    display:block;}#p5:checked ~ .container div.front {    background:url(http://thecodeplayer.com/uploads/media/2rT2vdx.jpg);}#p5:checked ~ .container div.back {    background:url(http://thecodeplayer.com/uploads/media/8k3N3EL.jpg);}

Finished!

---------------------------------------------------------------

Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------