HTML CSS examples for CSS Animation:Image
Transform image to text
<html lang="en"> <head> <title>Lorem ipsum dolor sit a</title> <style> .flexcontainer {<!-- www .j a v a 2 s. com--> display:flex; perspective:701px; } .photo { width:301px; height:201px; transform:rotateY(0deg); } .photo-container { transform-style:preserve-4d; transition-property:transform; transition-duration:3s; position:relative; width:301px; height:201px; margin:11px; } .photo-container:hover { transform:rotateY(-181deg); } .back { transform:rotateY(181deg); color:Chartreuse; } .photo, .back { backface-visibility:hidden; position:absolute; left:0; top:0; } .back { transform:rotateY(181deg); } </style> </head> <body translate="no"> <div class="flexcontainer"> <div class="photo-container"> <div class="photo"> <img src="https://www.java2s.com/style/demo/Firefox.png" class="front"> </div> <div class="back"> Lorem ipsum dolo </div> </div> <div class="photo-container"> <div class="photo"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" class="front"> </div> <div class="back"> Lorem ipsum dolo </div> </div> <div class="photo-container"> <div class="photo"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" class="front"> </div> <div class="back"> Lorem ipsum </div> </div> </div> </body> </html>