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
Edit the bolded values to increase or decrease the angle of rotation./* --------- MBT Image Rotation ----- */
-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;
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
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:
Make these changes:<img src="IMAGE LINK HERE" border="0" alt="Image Description here" class="opacity" />
- 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: