How to use CSS Flipping image transitions and 3d transforms

Posted by

How to use CSS Flipping image transitions and 3d transforms

Step

  1. Put an image on top of a div inside a container.
  2. Put that in another container with perspective defined.
  3. When hovering on the outside container, add a rotate around the Y axis to the inside container.

HTML Code

<div id=”f1_container”> <div id=”f1_card” class=”shadow”> <div class=”front face”> <img src=”/images/Windows%20Logo.jpg”/> </div> <div class=”back face center”> <p>This is nice for exposing more information about an image.</p> <p>Any content can go here.</p> </div> </div> </div>

CSS Code

#f1_container {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *