Tuesday 7 May 2013

Tutorial : Image Hover 7 (Berpusing)




Assalamualaikum . Tutorial kali ni pulak bila korang halakan cursor ke gambar , gambar tuh akan berpusing . Nak cuba , jom ? 

1. Dashboard > Template
2. Press F3 dan cari code </style>
3. Copy code bawah ni

#card {
-webkit-transform-style: preserve-3d;
-webkit-perspective: 1000;
width: 100px;
height: 100px;
position: relative;
margin:0px;
}   

.back, .front {
position: absolute;
-webkit-backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s ease-in;
width: 100%;
height: 100%; 
font-family:verdana;
color: #000;  
font-size:8px; 
}

.back {
-webkit-transform: rotateY(180deg);
background: #000000;
overflow: hidden;
}   

.front {
}

#card-container {
display: inline-block;
text-align: justify;
}   

#card-container:hover .back {   
-webkit-transform: rotateY(0deg);
}

#card-container:hover .front {      
-webkit-transform: rotateY(-180deg);
}

4. Paste code di atas code yang korang cari tadi
5. Sekarang , copy code kat bawah ni pulak
<div id="card-container"><div id="card"><div class="back"><center>
<br/><br/><br/><br/>AYATKORG<br/></div>
<div class="front"><img src="URLIMG"></div></div></div>
6. Paste dekat mana - mana bahagian yang korang nak 
7. Preview and save 

oren : warna background
hijau : ayat korang
pink : URL image/gambar

Credit to : AtiQahJaidin

0 comments: