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