Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to click on the flip effect on HTML5 mobile. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Two faces of the same size, in the same position

The Y axis of the front rotates to 0 degrees.

The Y axis of the back is rotated 180 degrees

Hide the back of the rotated div element (backface-visibility)

When you click, change the rotation angle of the front and back at the same time, giving an animation time (transition)

Remember to change the picture path.

Css3 Flip * {margin: 0; padding: 0 } ul, li {margin: 0; padding: 0; list-style: none } .flip-container, .front1, .back1 {width: 283px; height: 283px } .front1, .back1 {position: absolute; top: 0; left: 0 Backface-visibility: hidden;-webkit-backface-visibility: hidden; transition: 0.6s ease-out;-webkit-transition: .6s ease-out; transform-style: preserve-3d -webkit-transform-style: preserve-3d;} .front1 img, .back1 img {width: 283px; height: 283px; overflow: hidden .front1 {z-index: 2; transform: rotateY (0deg);-webkit-transform: rotateY (0deg) Back1 {z-index: 1; transform: rotateY (- 180deg);-webkit-transform: rotateY (- 180deg) } .back2 {transform: rotateY (0deg);-webkit-transform: rotateY (0deg); z-index: 2 } .front2 {transform: rotateY (180deg);-webkit-transform: rotateY (180deg); z-index: 1}

Let is1 = true; document.getElementsByClassName ('flip-container') [0] .onclick = function () {if (is1) {$(this). Find (' front1'). AddClass ('front2'); $(this). Find (' back1'). AddClass ('back2') } else {$(this) .find ('.front1'). RemoveClass ('front2'); $(this). Find (' back1'). RemoveClass ('back2');} is1 =! is1 } this is the end of the article on "how to actually click on the flip effect on HTML5 mobile". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.