|
D'Boss! 
  Awesemo Followers! Contact Me! Exchanged Banner Much Love From : Alia Najihah 
Credits!
| Assalamualaikum and annyeonghaseyo. Tutor ni tieqa nak tunjukkan cara untuk buat image hover yang akan berpusing/terbalik apabila dihalakan cursor. kalau x paham ikut je care kat bawah ni
1. Dashboard > Template
2. Press Ctrl + f serentak dan cari code </style>
3. Kemudian, copy code dekat 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 di atas code tadi 5. Now, copy code 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 bahagian yang korang nak. Contohnya dekat sidebar. 7. Preview & save merah : warna background hijau : ayat korang pink : URL image/gambar |
0 Comments:
Post a Comment