Rotate/Animate Images Using CSS3 Without JavaScript! .:: My Blogger Trick

Rotate/Animate Images Using CSS3 Without JavaScript!

CSS3 has many new powers with which we can further enhance our websites, without extensive knowledge of JavaScript, or without really effecting our website’s loading time. With less than ten lines of CSS coding, we can achieve each of the following effects. Changing CSS properties on mouse-hover and using CSS3 transitions were used for these enhancements. You can now easily animate the images on your WordPress or Blogger blogs using the simple image opacity effect below that

rotates the image on mouse hover.

Live Demo
Note: You need a up to date browser to fully experience the effects. This includes pretty much the latest version of any browser other than IE.

Animating Images In Blogger With CSS3

Go To Blogger > Design > Edit HTML
Backup your template
Search for ]]></b:skin>
Just above it paste the following code

/* --------- MBT Image Rotation ----- */
.opacity {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.opacity:hover {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1.3;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}

Edit the bolded values to increase or decrease the angle of rotation.
5. Save your template and done!

How it works?

Whenever you wish to implement this effect, simply add the following code in Edit HTMLmode of your Post Editor, to turn or rotate the images:

<img src="IMAGE LINK HERE" border="0" alt="Image Description here" class="opacity" />

Make these changes:

Replace IMAGE LINK HERE with the Image URL of the pic
Replace Image Description here with Image name or description. Optional

We hope you enjoyed the effect, and happy blogging! Peace!
You may also like these effects:

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Subscribe To Get Latest Tricks On Email!