Slides Dengan Efek 3D Carousel | Buku Catatan si Ugi

Home › Blogs Tutorial › CSS › Effects Gambar › Widgets › Slides Dengan Efek 3D Carousel

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".



Demonstrasi 3D Carousel of Slides:














More Detail :
Cara membuatnyapun sangat mudah, cukup meletakan Kode HTML kedalam tag <body> atau dimanapun anda ingin menampilkannya pada halaman website anda.

Sebelum memasang Kode HTML tersebut, terlebih dahulu anda harus memasang kode CSS yang dapat anda letakan kedalam tag <head> template anda.
Kode CSS
<style type="text/css" media="screen">
/* ================================================================
This copyright notice must be untouched at all times.

Copyright (c) Stu Nicholls - CSS play. 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);}
}

</style>
Kode HTML
<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>
</div>


sumber: cssplay

0 komentar:

Post a Comment



Catatan :

Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon







 

Anda sudah mengaktifkan penyaringan konten ( AdBlocker di Aktifkan )

Mohon maaf untuk sementara Anda tidak dapat melihat halaman ini, silahkan kembali lagi setelah Anda menonaktifkan filter yang Anda gunakan. Abaikan