Slide gambar dengan efek 3D

Ini adalah sebuah demonstrasi menggunakan 3D perspective, yang dapat Menciptakan "Slide Carousel". Dengan menggunaan keyframes dan translate3d (x, y, z), Slide Carousel ini dapat Berputar seperti layaknya jari-jari dan dapat "auto-run".

Jika dilihat dari atas, Slide Carousel ini terlihat berputar berlawanan dengan arah jarum jam dan ketika sebuah gambar dari slides mencapai sisi kiri, gambar tersebut akan keluar dari lingkaran slides dan membesar selama beberapa detik, kemudian kembali lagi pada susunannya kedalam "Slide Carousel"







DEMO


Untuk proses pembuatannya ikuti langkah berikut,

Loggin Blogger > Rancangan > Edit html
Cari kode ]]></b:skin> dan pastekan kode berikut diatasnya


/* ================================================================

This copyright notice must be untouched at all times.
Copyright (c) Buku Catatan si Ugi. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.carousel {width:750px; margin:0 auto;
-webkit-perspective: 1600px;
-webkit-perspective-origin: 50% -500px;
}
.ring {position:relative; margin:0 0 0 440px; height:120px; width:180px;
-webkit-transform-style: preserve-3d;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration:36s;
-webkit-animation-name: rotateMe;
}
.spoke {position:absolute; height:120px; width:180px;}
.ring img {border:5px solid #fff;
-o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-ms-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0,0.5);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration:36s;
}
.ring img {display:block; width:180px; height:120px;}
.ring .p1 {-webkit-animation-name: enlargeMe12;}
.ring .p2 {-webkit-animation-name: enlargeMe11;}
.ring .p3 {-webkit-animation-name: enlargeMe10;}
.ring .p4 {-webkit-animation-name: enlargeMe9;}
.ring .p5 {-webkit-animation-name: enlargeMe8;}
.ring .p6 {-webkit-animation-name: enlargeMe7;}
.ring .p7 {-webkit-animation-name: enlargeMe6;}
.ring .p8 {-webkit-animation-name: enlargeMe5;}
.ring .p9 {-webkit-animation-name: enlargeMe4;}
.ring .p10 {-webkit-animation-name: enlargeMe3;}
.ring .p11 {-webkit-animation-name: enlargeMe2;}
.ring .p12 {-webkit-animation-name: enlargeMe1;}
@-webkit-keyframes rotateMe {
0% { -webkit-transform: rotateY(0deg);}
8.33% { -webkit-transform: rotateY(30deg);}
16.66% { -webkit-transform: rotateY(60deg);}
24.99% { -webkit-transform: rotateY(90deg);}
33.33% { -webkit-transform: rotateY(120deg);}
41.66% { -webkit-transform: rotateY(150deg);}
49.99% { -webkit-transform: rotateY(180deg);}
58.33% { -webkit-transform: rotateY(210deg);}
66.66% { -webkit-transform: rotateY(240deg);}
74.99% { -webkit-transform: rotateY(270deg);}
83.33% { -webkit-transform: rotateY(300deg);}
91.66% { -webkit-transform: rotateY(330deg);}
100% { -webkit-transform: rotateY(360deg);}
}
@-webkit-keyframes enlargeMe1 {
0% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
5.33% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
8.33% {-webkit-transform: rotateY(330deg) scale(2) translate3d(-190px, 0, 0);}
11.33% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe2 {
0% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
13.66% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
16.66% { -webkit-transform: rotateY(300deg) scale(2) translate3d(-190px, 0, 0);}
19.66% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe3 {
0% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
21.991% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
24.99% {-webkit-transform: rotateY(270deg) scale(2) translate3d(-190px, 0, 0);}
27.99% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe4 {
0% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
30.33% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
33.33% {-webkit-transform: rotateY(240deg) scale(2) translate3d(-190px, 0, 0);}
36.33% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe5 {
0% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
38.66% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
41.66% {-webkit-transform: rotateY(210deg) scale(2) translate3d(-190px, 0, 0);}
44.66% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe6 {
0% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
46.99% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
49.99% {-webkit-transform: rotateY(180deg) scale(2) translate3d(-190px, 0, 0);}
52.99% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe7 {
0% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
55.33% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
58.33% {-webkit-transform: rotateY(150deg) scale(2) translate3d(-190px, 0, 0);}
61.33% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe8 {
0% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
63.66% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
66.66% {-webkit-transform: rotateY(120deg) scale(2) translate3d(-190px, 0, 0);}
69.66% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe9 {
0% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
71.99% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
74.99% {-webkit-transform: rotateY(90deg) scale(2) translate3d(-190px, 0, 0);}
77.99% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe10 {
0% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
80.33% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
83.33% {-webkit-transform: rotateY(60deg) scale(2) translate3d(-190px, 0, 0);}
86.33% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe11 {
0% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
88.66% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
91.66% {-webkit-transform: rotateY(30deg) scale(2) translate3d(-190px,0, 0);}
94.66% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
}
@-webkit-keyframes enlargeMe12 {
0% {-webkit-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
3% {-webkit-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
96.9% {-webkit-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
97% {-webkit-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
100% {-webkit-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
}
/* for Firefox */
.carousel {
-moz-perspective: 1600px;
-moz-perspective-origin: 50% -500px;
}
.ring {
-moz-transform-style: preserve-3d;
-moz-animation-iteration-count: infinite;
-moz-animation-duration:36s;
-moz-animation-name: rotateMe;
}
.ring img {
-moz-animation-iteration-count: infinite;
-moz-animation-duration:36s;
}
.ring .p1 {-moz-animation-name: enlargeMe12;}
.ring .p2 {-moz-animation-name: enlargeMe11;}
.ring .p3 {-moz-animation-name: enlargeMe10;}
.ring .p4 {-moz-animation-name: enlargeMe9;}
.ring .p5 {-moz-animation-name: enlargeMe8;}
.ring .p6 {-moz-animation-name: enlargeMe7;}
.ring .p7 {-moz-animation-name: enlargeMe6;}
.ring .p8 {-moz-animation-name: enlargeMe5;}
.ring .p9 {-moz-animation-name: enlargeMe4;}
.ring .p10 {-moz-animation-name: enlargeMe3;}
.ring .p11 {-moz-animation-name: enlargeMe2;}
.ring .p12 {-moz-animation-name: enlargeMe1;}
@-moz-keyframes rotateMe {
0% { -moz-transform: rotateY(0deg);}
8.33% { -moz-transform: rotateY(30deg);}
16.66% { -moz-transform: rotateY(60deg);}
24.99% { -moz-transform: rotateY(90deg);}
33.33% { -moz-transform: rotateY(120deg);}
41.66% { -moz-transform: rotateY(150deg);}
49.99% { -moz-transform: rotateY(180deg);}
58.33% { -moz-transform: rotateY(210deg);}
66.66% { -moz-transform: rotateY(240deg);}
74.99% { -moz-transform: rotateY(270deg);}
83.33% { -moz-transform: rotateY(300deg);}
91.66% { -moz-transform: rotateY(330deg);}
100% { -moz-transform: rotateY(360deg);}
}
@-moz-keyframes enlargeMe1 {
0% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
5.33% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
8.33% {-moz-transform: rotateY(330deg) scale(2) translate3d(-190px, 0, 0);}
11.33% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(330deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe2 {
0% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
13.66% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
16.66% { -moz-transform: rotateY(300deg) scale(2) translate3d(-190px, 0, 0);}
19.66% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(300deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe3 {
0% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
21.991% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
24.99% {-moz-transform: rotateY(270deg) scale(2) translate3d(-190px, 0, 0);}
27.99% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(270deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe4 {
0% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
30.33% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
33.33% {-moz-transform: rotateY(240deg) scale(2) translate3d(-190px, 0, 0);}
36.33% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(240deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe5 {
0% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
38.66% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
41.66% {-moz-transform: rotateY(210deg) scale(2) translate3d(-190px, 0, 0);}
44.66% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(210deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe6 {
0% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
46.99% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
49.99% {-moz-transform: rotateY(180deg) scale(2) translate3d(-190px, 0, 0);}
52.99% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(180deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe7 {
0% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
55.33% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
58.33% {-moz-transform: rotateY(150deg) scale(2) translate3d(-190px, 0, 0);}
61.33% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(150deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe8 {
0% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
63.66% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
66.66% {-moz-transform: rotateY(120deg) scale(2) translate3d(-190px, 0, 0);}
69.66% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(120deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe9 {
0% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
71.99% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
74.99% {-moz-transform: rotateY(90deg) scale(2) translate3d(-190px, 0, 0);}
77.99% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(90deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe10 {
0% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
80.33% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
83.33% {-moz-transform: rotateY(60deg) scale(2) translate3d(-190px, 0, 0);}
86.33% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(60deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe11 {
0% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
88.66% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
91.66% {-moz-transform: rotateY(30deg) scale(2) translate3d(-190px,0, 0);}
94.66% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(30deg) translate3d(-120px, 0, 0);}
}
@-moz-keyframes enlargeMe12 {
0% {-moz-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
3% {-moz-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
96.9% {-moz-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
97% {-moz-transform: rotateY(0deg) translate3d(-120px, 0, 0);}
100% {-moz-transform: rotateY(0deg) scale(2) translate3d(-190px, 0, 0);}
}

Selanjutnya untuk kode pemanggil anda bisa letakkan dimana saja mau di posting, sidebar dll

<div class="carousel">
<div class="ring">
<img class="spoke p1" src="Letakan URL Gambar anda disini" alt="" />
<img class="spoke p2" src="Letakan URL Gambar anda disini" alt="" />
<img class="spoke p3" src="Letakan URL Gambar anda disini" alt="" />
<img class="spoke p4" src="Letakan URL Gambar anda disini" alt="" />
<img class="spoke p5" src="Letakan URL Gambar anda disini" alt="" />
<img class="spoke p6" src="Letakan URL Gambar anda disini" alt="" />
<img class="spoke p7" src="Letakan URL Gambar anda disini" alt="" />
<img class="spoke p8" src="Letakan URL Gambar anda disini" alt="" />
<img class="spoke p9" src="Letakan URL Gambar anda disini" alt="" />
<img class="spoke p10" src="Letakan URL Gambar anda disini" alt="" />
<img class="spoke p11" src="Letakan URL Gambar anda disini" alt="" />
<img class="spoke p12" src="Letakan URL Gambar anda disini" alt="" />
</div>

Oke cukup itu saja.. Semoga bermanfaat
Sumber : Buku catatan Si ugi


Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Jasriman Sukri, Published at 13.33 and have 8 komentar

8 komentar: