How to realize the effect of 3D Flip in css3
This article mainly explains "how to achieve graphics 3D flip effect in css3". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to achieve graphic 3D flip effect in css3".
The code is as follows:
Css3 3D rotate body,div,ul,li {padding:0; margin:0;} .container ul li {height: 180px; width: 180px; margin-right: 20px; margin-bottom: 20px; display: inline;-webkit-perspective: 1000px;-moz-perspective: 1000px; float: left;} .out _ box {position: relative; height: 180px; width: 180px;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;-ms-transform-style: preserve-3d Transform-style: preserve-3d;-webkit-transition: 0.5s;-moz-transition: 0.5s;-o-transition: 0.5s;-ms-transition: 0.5s; transition: 0.5s;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden; backface-visibility: hidden;} .out _ box div {display: block; height: 180px; width: 180px; position: absolute; left: 0; top: 0; background: # 060; text-align: center -webkit-backface-visibility: hidden;-moz-backface-visibility: hidden; backface-visibility: hidden; color:#FFF; line-height:180px; font-size:16px;} .out _ box. Front _ box {z-index: 2;} .out _ box .back _ box {z-index: 1;-webkit-transform: rotateY (180deg);-moz-transform: rotateY (180deg); transform: rotateY (180deg) } .container ul li:hover .out _ box {- webkit-transform: rotateY (180deg);-moz-transform: rotateY (180deg); transform: rotateY (180deg);} .container ul li:hover .back _ box {z-index: 3 } front back front2 back2 front3 back3 thank you for your reading, the above is the content of "how to achieve graphics 3D flip effect in css3". After the study of this article, I believe you have a deeper understanding of how to achieve graphics 3D flip effect in css3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
