transitions and 3d transforms

transitions and 3d transforms

  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

First, the markup.

<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face"><img src="http://phpkida.com/phpkida1.png" alt="" /></div>
<div class="back face center">

This is nice for exposing more information about an image.
Any content can go here.

</div>
</div>
</div>

Then the CSS Code Will Be Apply

#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;
}
About Author

My name is Mukesh Jakhar and I am a Web Application Developer and Software Developer, currently living in Jaipur, India. I have a Master of Computer Application in Computer Science from JNU Jaipur University. I loves to write on technology and programming topics. Apart from this, I love to travel and enjoy the beauty of nature.

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.