Issue
I have been playing with transitions all morning and am at a road block. I have the need to have an image "tilt" forward when hovered over. Basically we have beer taps that when they hover over they want them to tilt as if they are being pulled down. I have played with a bunch of code but right now have nothing remotely close to post here. If anyone could give some help on how to accomplish this in css3 it would be greatly appreciated.
Solution
Below is a basic version (works in safari & chrome). You can play with the perspective values to change the effect.
I'm not sure where you were running into trouble, but the key points here are:
- container to hold the rotated elements that will allow you to use perspective
- perspective to change the overall look of the animation
- transform-origin to set the rotation point of the image (using the bottom in the demo)
- rotateX to rotate around the x axis - tilting the image toward/away from the viewer
.container {
-webkit-perspective: 1000px;
perspective: 1000px;
margin: 2em;
transform-style: preserve-3d;
}
img {
transition: all .5s ease;
-webkit-transform: rotateX(0deg);
-webkit-transform-origin-y: 300px; /* rotates from the bottom of the image */
}
img:hover {
-webkit-transform: rotateX(-40deg);
}
<div class="container">
<img src="http://placekitten.com/200/300" width="200" height="300">
</div>
Answered By - dc5
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.