Labkom99.com – Pada kesempatan kali ini labkom99 akan memberikan tutorial Belajar membuat efek membalik gambar HTML dan CSS3. Efek ini dapat membalik gambar saat mouse mengarahkan kursor ke gambar, dan gambar juga memiliki efek pantulan yang keren. Dengan membuat efek refleksi membalik gambar ini, tentunya dapat mempercantik dan memperindah tampilan website. Banyak yang yang sudah menggunkan efek HTML dan CSS3 ini utuk website e-comerce atau pada geleri foto web. Berikut cara membuat efek refleksi membalik gambar menggunkan HTML dan CSS3.
Alat / Bahan Baku Membuat Efek Refleksi Membalik Gambar
Notepad Bisa menggunakan Tols web programming Lain untuk pemrograman
Perhatian Sebelum Membuat Efek Refleksi Membalik Gambar
Untuk belajar membuat efek refleksi membalik gambar menggunkan HTML dan CSS3 pada bagian ini sebaiknya memahami terlebih dahulu tentang Struktur dasar HTML dan cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah dipelajari pada pembahasan Bagaimana Cara Membuat Template HTML
Metode / Langkah
Halaman web terlebih galeri foto atau halaman yang menampilkan gambar lain tentunnya harus memiliki efek keren sebagai penghias gambar tersebut cara membuatnya cukup simple hanya dengan beberapa CSS simple seperti di bawah ini.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: black;
}
.scene {
width: 1000px;
display: flex;
justify-content: space-between;
-webkit-perspective: 800px;
perspective: 800px;
}
.scene .card {
position: relative;
width: 240px;
height: 300px;
color: white;
cursor: pointer;
transition: 1s ease-in-out;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.scene .card:hover {
-webkit-transform: rotateY(0.5turn);
transform: rotateY(0.5turn);
}
.scene .card .card__face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: 1s ease-in-out;
-webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
}
.scene .card .card__face img {
width: 240px;
height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
.scene .card .card__face--back {
-webkit-transform: rotateY(0.5turn);
transform: rotateY(0.5turn);
}Css diatas menggunakan CSS3 yang difungsikan untuk memberikan efek refleksi pada gambar. Fungsi transform rotate pada CSS diatas adalah fungsi untuk memutar gambar ketika pointer atau mouse tepat berada pada gambar. Dan untuk melangkapi CSS3 diatas hanya perlu sedikit ditambahkan tag HTML untuk memanggil dimana lokasi gambar dilatakkan. Untuk Tag HTML yang di butuhkan seperti pada script di bawah ini :
<div class="scene">
<div class="card">
<div class="card__face card__face--front">
<img src="img/labkom99_gambar1.jpg" />
</div>
<div class="card__face card__face--back">
<img src="img/labkom99_gambar2.jpg" />
</div>
</div>
<div class="card">
<div class="card__face card__face--front">
<img src="img/labkom99_gambar3.jpg" />
</div>
<div class="card__face card__face--back">
<img src="img/labkom99_gambar4.jpg" />
</div>
</div>
<div class="card">
<div class="card__face card__face--front">
<img src="img/labkom99_gambar5.jpg" />
</div>
<div class="card__face card__face--back">
<img src="img/labkom99_gambar6.jpg" />
</div>
</div>
</div>Perhatikan pada tag img src silahkan ganti tulisan yang berwana merah dengan alamat url atau file lokasi gambar yang akan ditampilkan.
Berikut ini adalah demonya
Berikut Ini Sourcode Lengkapnya
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Labkom99-Membuat Efek Refleksi Membalik Gambar Dengan HTML Dan CSS3 </title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: black;
}
.scene {
width: 1000px;
display: flex;
justify-content: space-between;
-webkit-perspective: 800px;
perspective: 800px;
}
.scene .card {
position: relative;
width: 240px;
height: 300px;
color: white;
cursor: pointer;
transition: 1s ease-in-out;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.scene .card:hover {
-webkit-transform: rotateY(0.5turn);
transform: rotateY(0.5turn);
}
.scene .card .card__face {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition: 1s ease-in-out;
-webkit-box-reflect: below 0 linear-gradient(transparent, transparent, rgba(0, 0, 0, 0.4));
}
.scene .card .card__face img {
width: 240px;
height: 300px;
-o-object-fit: cover;
object-fit: cover;
}
.scene .card .card__face--back {
-webkit-transform: rotateY(0.5turn);
transform: rotateY(0.5turn);
}
</style>
</head>
<body>
<div class="scene">
<div class="card">
<div class="card__face card__face--front">
<img src="https://1.bp.blogspot.com/-rRKk_xrlD3Q/XttyqTorEbI/AAAAAAAAJ6M/9TWDuArecG8nNeExncx0I3gVBg2kPWCGACLcBGAsYHQ/s640/Belajar%2BHTML%2BDan%2BCSS%2BMembuat%2BAnimasi%2BCantik%2BPada%2BTulisan.png" />
</div>
<div class="card__face card__face--back">
<img src="https://1.bp.blogspot.com/-rPNEhzjoBSc/Xw1Chh_cGNI/AAAAAAAAKNM/BevbjxM55YAQEVlkw7tE0Z5drZQ17ERKQCPcBGAYYCw/w640-h320/Tips%2BModifikasi%2BTemplate%2BWebsite%2BAgar%2BTerlihat%2BLebih%2BUnik.jpg" />
</div>
</div>
<div class="card">
<div class="card__face card__face--front">
<img src="https://1.bp.blogspot.com/-qZZX5y0Rg0A/Xobe5STLx-I/AAAAAAAAJsw/8Ex38GtLR6EwIuucaEPaXwqdMVCr1tKCwCLcBGAsYHQ/s640/Belajar%2BHTML%2BDan%2BCSS3%2BMembuat%2BMouseover%2BZoom%2BDan%2BEfek%2BThumbnail.png" />
</div>
<div class="card__face card__face--back">
<img src="https://1.bp.blogspot.com/-Oxqeff0BqTw/XwwIalUMzhI/AAAAAAAAKMo/MLOkBu3fijA5RVABeajfjBsQgpMFqa-NgCLcBGAsYHQ/w640-h336/Tools%2BFront-End%2BHTML5%2BYang%2BSering%2BDigunakan%2BProgramer.jpg" />
</div>
</div>
</div>
</body>
</html>Kesimpulan
Diatas adalah cara Membuat Efek Refleksi Membalik Gambar Dengan HTML Dan CSS3. Hanya dengan menggunakan notepad copy paste kode diatas kemudain save .html, kalian sudah dapat mencobanya. Semoga bermanfaat
