<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <styletype= "Text/css"> /*entire container, keeps perspective*/. Flip-container{Perspective: +;} /*Flip the pane when hovered*/. Flip-container:hover. Flipper,. 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;}/*Back , initially hidden pane*/. Back{Transform:Rotatey (180deg);} </style></Head><Body> <Divclass= "Flip-container"Ontouchstart= "this.classList.toggle (' hover ');"> <Divclass= "Flipper"> <Divclass= "Front"> <!--Previous Content - <imgsrc= "Http://pic0.xihuan.me/edr/680__/t021499be002a3f0cf1.jpg"Height= "The "alt=""> </Div> <Divclass= "Back"> <imgsrc= "Http://pic2.xihuan.me/edr/680__/t029373f8f522a8bc97.jpg"Height= "The "alt=""> <!--Back Content - </Div> </Div></Div></Body></HTML>
Document
Picture reversal effect