hide a div containing text behind an image in 3D transform - HTML CSS CSS Animation

HTML CSS examples for CSS Animation:3D

  1. HOME
  2. HTML CSS
  3. CSS Animation
  4. 3D

Description

hide a div containing text behind an image in 3D transform

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit a</title> 
  <style>
.flexcontainer {<!--   w w  w  . java  2 s .c o m-->
   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/Opera.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/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 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials