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

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!

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.