Learning About HTML
<div class="container">
<div class="wrapper">
<div class="im-fix"><img src="foo.jpg"></div>
<div class="img-closed"><img src="foo-close.jpg"></div>
<div class="img-open"><img src="foo-open.jpg"></div>
</div>
</div>
After setting up a basic image on the screen, I wanted to create an animation that mimics the opening of an envelope using CSS3. Here is an example of some CSS code I used:
.img-closed {
position: absolute;bottom: 163px;
transition:width 2s, height 2s, background-color 2s, transform 2s;
}
.img-open:hover {
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
However, instead of achieving the desired effect of the envelope "opening up," it looked more like a spinning wheel. What I actually wanted was for the envelope to open and reveal different information inside.