Arahkan kursor kamu untuk melihat efeknya
Untuk penerapan efek itu gimana gan? ih si agan, itu mah mudah atuh,
ente tinggal sisipin css berikut pada template agan, tepatnya di atas ]]></b:skin>
.putar{
opacity: 0.05;
-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(720deg);
-o-transform: rotate(720deg);
-webkit-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.putar: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 14px #aadd27;
-webkit-box-shadow: 1px 1px 14px #aadd27;
box-shadow: 1px 1px 14px #aadd27;
}
Udah belum gan? belum atuh, itu mah baru naro cssnya aja, nah biar efeknya jalan maka ente harus sisipin class="putar" pada HTML gambar. Contohnya? lihat ke bawah yuk!
Saya kan punya HTML gambar nih
<img border="0" src="http://i1223.photobucket.com/albums/dd511/imukabuto/cooltext529715322.png" />
nah biar efek itu muncul pada gambar tersebut maka saya harus sisipkan class="putar" pada HTML gambar itu, jadinya seperti di bawah ini
<img border="0" class="putar" src="http://i1223.photobucket.com/albums/dd511/imukabuto/cooltext529715322.png" />
Semuoga membantu...
Comments :
0 komentar to “Putar Gambar dengan CSS3 tanpa Javascript”
Posting Komentar
Jangan lupa di follow dan tinggalkan komentar
Komentar anda sangat bermanfaat untuk perkembangan blog ini. Gunakanlah kata kata sopan dan santun. Terimakasih.....