css3-image-flip-effect March 27, 2015 Get link Facebook X Pinterest Email Other Apps css3-image-flip-effect copy and paste the code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css3-image-flip-effect</title> <style> .newabc{ background:#333; padding:10px; margin:auto; } .mg-flip-container { perspective:1000px; margin:auto; } .mg-flip-container:hover .mg-flip-content, .mg-flip-container.hover .mg-flip-content { transform:rotateY(180deg); } .mg-flip-container,.front-side,.back-side { width: 200px; height: 200px; } .mg-flip-content { transition:.6s; /* Flip duration */ transform-style:preserve-3d; position:relative; } .front-side, .back-side { backface-visibility:hidden; position:absolute; top:0; left:0; } .front-side { z-index:2; transform:rotateY(0deg); } .back-side { transform:rotateY(180deg); } </style> </head> <body> <div class="newabc"> <div class="mg-flip-container" ontouchstart="this.classList.toggle('hover');"> <div class="mg-flip-content"> <div class="front-side"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg" alt="front" width="200" height="200" class="aligncenter size-full wp-image-3079" /> </div> <div class="back-side"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg" alt="back" width="200" height="200" class="aligncenter size-full wp-image-3078" /> </div> </div> </div> </div> </body> </html> Comments
Comments
Post a Comment