How to use css3 to realize the special effect of picture flipping
This article mainly introduces how to use css3 to achieve picture flipping special effects, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
The code is as follows:
Css3 flipping
* {margin:0; padding:0;}
Ul,li {list-style:none; margin:0; padding:0;}
.brandsShow {width:1200px; height:620px; margin:0 auto;}
.brandsShow ul {margin-left:-20px; width:1225px; height:auto;}
.brandsShow ul li {float:left; display:inline; width:283px; height:283px;}
. flip-container {perspective: 1000
-webkit-perspective: 1000px; / * Perspective is allowed for perspective subclasses in the parent container * /
-moz-perspective: 1000px
-ms-perspective: 1000px
-o-perspective: 1000px
Perspective: 1000px
Margin:0px auto; float:left; margin-left:20px; margin-bottom:20px; border:1px solid # fff;}
.flip-container:hover .back {transform: rotateY (0deg);-webkit-transform: rotateY (0deg);-moz-transform: rotateY (0deg);-ms-transform: rotateY (0deg);-o-transform: rotateY (0deg); z index2;}
.flip-container:hover .front {transform: rotateY (180deg);-webkit-transform: rotateY (180deg);-moz-transform: rotateY (180deg);-ms-transform: rotateY (180deg);-o-transform: rotateY (180deg); z-index:1}
.flip-container, .front, .back {width: 283pxposiheight: 283px;}
.flipper {transition:transform 0.6s ease-out
Transition: transform .5s ease-in-out
-webkit-transition: transform .5s ease-in-out
-moz-transition: transform .5s ease-in-out
-ms-transition: transform .5s ease-in-out
-o-transition: transform .5s ease-in-out
-webkit-transform-style: preserve-3d; / * enables its subclasses to retain the position after 3D conversion * /
-moz-transform-style: preserve-3d
-ms-transform-style: preserve-3d
-o-transform-style: preserve-3d
Transform-style: preserve-3d
Display:block;position: relative;}
Front, .back {backface-visibility: hidden;transition: 0.6s ease-out;-webkit-transition: .6s ease-out;-webkit- transform-style: preserve-3d;- moz-transform-style: preserve-3d;- ms-transform-style: preserve-3d;-o-transform-style: preserve-3d;transform-style: preserve-3d;position: absolute;top: 0 political left: 0;}
.front img, .back img {width:283px; height:283px; overflow:hidden;}
Front {z-index: 2 transform: rotateY (0deg); transform: rotateY (0deg);-webkit-transform: rotateY (0deg);-moz-transform: rotateY (0deg);-ms-transform: rotateY (0deg);-o-transform: rotateY (0deg);}
.moz-transform: rotateY (- 180deg); transform: rotateY (- 180deg);-webkit-transform: rotateY (- 180deg);-moz-transform: rotateY (- 180deg)
-ms-transform: rotateY (- 180deg);-o-transform: rotateY (- 180deg);}
Front
behind
Thank you for reading this article carefully. I hope the article "how to use css3 to achieve special effects of picture flipping" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
