Some css3 transitions
HTML
<p>
Translate 200 X and 50 Y, adding a margin at the bottom to prevent overlapping:
</p>
CSS
body {
font: 13px/16px "Lucida Sans Unicode","Lucida Grande",sans-serif;
}
.pic_translate {
/*Firefox*/
-moz-transform: translate(200px, 50px);
/*WebKit - Chrome and Safari*/
-webkit-transform: translate(200px, 50px);
/*Internet Explorer 9*/
-ms-transform: translate(200px, 50px);
/*Opera*/
-o-transform: translate(200px, 50px);
/*general*/
transform: translate(200px, 50px);
/*other properties*/
margin-bottom: 70px;
}
.pic_rotate {
/*Firefox*/
-moz-transform: rotate(360deg);
/*WebKit - Chrome and Safari*/
-webkit-transform: rotate(360deg);
/*Internet Explorer 9*/
-ms-transform: rotate(360deg);
/*Opera*/
-o-transform: rotate(360deg);
/*general syntax*/
transform: rotate(360deg);
}
.pic_scale {
/*Firefox*/
-moz-transform: scale(2, 0.5);
-moz-transform-origin: top left;
/*WebKit - Chrome and Safari*/
-webkit-transform: scale(2, 0.5);
-webkit-transform-origin: top left;
/*Internet Explorer 9*/
-ms-transform: scale(2, 0.5);
-ms-transform-origin: top left;
/*Opera*/
-o-transform: scale(2, 0.5);
-o-transform-origin: top left;
/*general syntax*/
transform: scale(2, 0.5);
transform-origin: top left;
}
.pic_skew {
/*Firefox*/
-moz-transform: skew(20deg, -10deg);
/*WebKit - Chrome and Safari*/
-webkit-transform: skew(20deg, -10deg);
/*Internet Explorer 9*/
-ms-transform: skew(20deg, -10deg);
/*Opera*/
-o-transform: skew(20deg, -10deg);
/*general syntax*/
transform: skew(20deg, -10deg);
/*other properties*/
margin-top:50px;
margin-left:100px;
}
img {
/*Firefox*/
-moz-transition: all 3s;
/*WebKit - Chrome and Safari*/
-webkit-transition: all 3s;
/*Opera*/
-o-transition: all 3s;
/*general syntax*/
transition: all 3s;
}
JavaScript
$("img").click(function(){
if($(this).attr("class") == $(this).attr("id")){
$(this).removeClass();
}
else{
$(this).addClass($(this).attr("id"));
}
});