This is my first post about image rotation do you know CSS code yes it is very help full or compatible with all browser .Transformation is powerful feature of css its depend on Scaling, Translation, and Rotation.It is a pure code which is i explained today with you.I know you are thinking about demo of this code.
2. Select your blog if you have many.
3. Then go to Template>>>Click on edit HTML.
4. Then search for ]]></b:skin>
5. Then copy the below code and paste it just above it and save your template.
6. Then click on save.
How it will be effect in blogger post see now. You need to some changes in your post HTML.
Go to your post HTML find below code.
Add some code before this URL with End Tags.
NOTE :
In the above CSS code 350 deg specifies the degree of rotation you can change this value according to your own choice.
Almost done and look you site post drag mouse over in your images and play and must share this post .
click below for see demo
2. Select your blog if you have many.
3. Then go to Template>>>Click on edit HTML.
4. Then search for ]]></b:skin>
5. Then copy the below code and paste it just above it and save your template.
6. Then click on save.
Remember you should always have a back up to your template.
.rotate img{
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.rotate img:hover{
-moz-transform: rotate(350deg);
-webkit-transform: rotate(350deg);
-o-transform: rotate(350deg);
-ms-transform: rotate(350deg);
transform: rotate(350deg);
}
How it will be effect in blogger post see now. You need to some changes in your post HTML.
Go to your post HTML find below code.
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZHZiSsR8cc7TK0IVn3A4cjbJ1nOBrtpaCs40j1TFLH4TDvTYwfY7GEPQeBAsY1iIwyWBfwGux_J0uTBeKmuzK4gMNZlg3_eGNV3Y0MMXY1y77WeAlUhidwdViR5MwfgrmiITm6-FdpE/s1600/demo1.jpg" /></a></div>
Add some code before this URL with End Tags.
<div class="rotate"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoZHZiSsR8cc7TK0IVn3A4cjbJ1nOBrtpaCs40j1TFLH4TDvTYwfY7GEPQeBAsY1iIwyWBfwGux_J0uTBeKmuzK4gMNZlg3_eGNV3Y0MMXY1y77WeAlUhidwdViR5MwfgrmiITm6-FdpE/s1600/demo1.jpg" /></div></a></div>
NOTE :
In the above CSS code 350 deg specifies the degree of rotation you can change this value according to your own choice.
Almost done and look you site post drag mouse over in your images and play and must share this post .
fantastic
ReplyDelete