<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>. Flip-container{Perspective: +;} /*Flip the pane when hovered*/ /*. Flip-container:hover. Flipper,. Flip-container.hover. Flipper {Transform:rotatey (180deg); }*/. Flip-container.hover. Flipper{Transform:Rotatey (180deg); }. Flip-container,. Front,. Back{width:320px;Height:480px;}/*Flip Speed goes here*/. Flipper{transition:0.6s;Transform-style:preserve-3d;position:relative;}/*Hide back of pane during swap*/. Front,. Back{backface-visibility:Hidden;position:Absolute;Top:0; Left:0;}/*Front pane, placed above back*/. Front{Z-index:2;background:Red;}/*Back , initially hidden pane*/. Back{Transform:Rotatey (180deg);background:Cyan;}#myCard{Padding-top:300px; } </style></Head><Body> <!--<div class= "Flip-container" ontouchstart= "this.classList.toggle (' hover ');" > - <Divclass= "Flip-container"> <Divclass= "Flipper"> <Divclass= "Front">Previous Content</Div> <Divclass= "Back">Back Content</Div> </Div> </Div> <!--/<div id= "Mycard" onclick= "Document.queryselector ('. Flip-container '). Classlist.toggle (' hover ')" >but </div> - <DivID= "Mycard">But</Div> <Scriptsrc= "Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></Script> <Script> $(function(){ $('#myCard'). Click (function(){ $('. Flip-container'). Toggleclass ('Hover') }) }) </Script></Body></HTML>
Original: http://www.jianshu.com/p/99aeb911f547;
1190000003903190
CSS3 3d positive and negative flip