Cover
Cover your page.
Cover is a one-page template for building simple and beautiful home pages. Download, edit the text, and add your own fullscreen background photo to make it your own.
Tampilan gambar dan sistem kerja pada efek hampir sama dengan tutorial saya sebelumnya tentang➟ Cara Membuat Animasi Teks Berputar Efek 3D, letak perbedaan hanya pada perintah kinerja efek. Sebagai tahap dasar, saya akan ilustrasikan tutorial kali untuk Membuat Gambar Dengan Efek Flip Animasi menggunakan kode CSS seperti ini:
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
border: 2px solid #39f;
margin:-2em auto;}
//durasi efek 3D with transition
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;}
.pic {
background: url(URL-gambar Anda.jpg) 0 0 no-repeat;
z-index: 2;}
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
border: 2px solid #39f;
margin:-2em auto;}
//durasi efek 3D with transition
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;}
.pic {
background: url(URL-gambar Anda.jpg) 0 0 no-repeat;
z-index: 2;}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="pic">
<span class="about">Devy Indriyani</span>
</div>
</div>
</div>
<div class="flipper">
<div class="pic">
<span class="about">Devy Indriyani</span>
</div>
</div>
</div>
Halaman dibalik gambar masih terlihat kosong, biasanya hal apa yang akan Anda tampilkan di sana?, sekedar membuat catatan singkat tentang memorandum yang berhubungan dengan gambar tersebut, atau saat ini Anda sudah menyimpan sebuah ide yang menarik untuk Anda tampilkan, mungkin?. Untuk menampilkan apa yang akan Anda tuliskan, saya sudah rangkai kodenya dengan CSS seperti ini:
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
border: 2px solid #39f;}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);}
.flip-container, .pic, .back {width: 320px;height: 427px;}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;}
.pic, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;left: 0;}
.pic {
background: url(URL-gambar Anda.jpg) 0 0 no-repeat;
z-index: 2;}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #f8f8f8;}
.pic .about {
font-size: 1.4em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Helvetia;
padding: 5px 10px;
border-radius: 5px;
border:2px solid aqua;
float:right;right:10px;
bottom:15px;position:absolute;}
.img-logo {
position: absolute;
top: 35px;border-radius:50%;
left: 90px;width: 139px;height: 139px;
background: url(URL-gambar Anda.png) 50% 50% no-repeat;}
.back-desc {
font-weight: bold;
position: absolute;
top: 200px;text-align: center;
left: 0;right: 0;font-size: 25px;
text-shadow: 0.1em 0.1em 0.05em #C0C0C0;
font-family: Lato;color: #00304a;
background: linear-gradient(left, transparent 0%,red 50%,transparent 100%);
background:-webkit-linear-gradient(left, transparent 0%,red 50%,transparent 100%);
background:-moz-linear-gradient(left, transparent 0%,red 50%,transparent 100%);
background:-o-linear-gradient(left, transparent 0%,red 50%,transparent 100%);}
.back p {
position: absolute;
bottom: 50px;left: 0;right: 0;
text-align: center;padding: 0 20px;
font-family: arial;
line-height: 2em;color:#333;}
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<div class="pic">
<span class="about">
Devy Indriyani
</span>
</div>
<div class="back">
<div class="img-logo">
</div>
<div class="back-desc">
SAHABAT BLOGGER 77
</div>
//Anda bisa tuliskan apa saja disini...
<p>
Your Descriptions Text
</p>
</div>
</div>
</div>Sehingga hasilnya akan jadi seperti ini:
Bagaimana, setelah halaman kosong dibalik gambar di isi dengan sebuah tampilan akan terlihat lebih menarik dari efek sebelumnya bukan? hehe.... Semoga tutorial efek gambar kali ini dapat memberikan keceriaan buat sahabat semua pecinta SAHABAT BLOGGER 77. Salam manis **)