Tutorial membuat corousel 3D dengan html dan css

Hello World, ketemu admin lagi nih. Gimana kabarnya? sehat sehat aja kan ya pastinya. Kalo buat yang lagi ngak enak badan. Admin doa in deh supaya cepet sembuh aminn. Kesempatan kali ini admin akan membuatkan sebuah crousel 3dimensi nih, pastinya kerendeh kalian bisa lihat aja nanti bisa juga coba sendiri. Admin juga udah sediain source code filenya di bagian bawah artikel ini kok.
Dalam membuat corousel 3Dimensi ini kita hanya memerlukan script html dan css tanpa perlu bantuan dari javascript apalagi PHP(pemberi harapan palsu) hahaha. Sebelum kita memulai tutorial kali ini kita akan pahami dahulu apa itu css dan apa itu html dan apa itu crousel?

Sebenarnya kalo kita ingat-ingat buat kalian yang udah baca semua artikel di blog ini kalian pasti ingat dong kita juga pernah membuat corousel dan menjadikan nya sebagai aplikasi mobile android atau apk. Nah mungkin di tutorial kali ini hanya sedikit berbeda di tampilanya ya. Udah pada penasaran semua ya pasti haha sabar kita langsung aja deh bahas html, css, corousel.

HTML

HTML (Hypertext Markup Language) adalah himpunan simbol markup atau kode yang dimasukkan dalam file yang ditujukan untuk ditampilkan pada halaman browser World Wide Web. Markup ini memberi tahu browser Web cara menampilkan kata dan gambar laman web untuk pengguna. Setiap kode markup individu disebut sebagai elemen (tetapi banyak orang juga menyebutnya sebagai tag). Beberapa elemen datang berpasangan yang menunjukkan kapan beberapa efek tampilan akan dimulai dan kapan akan berakhir.

Kelebihan dan Kekurangan html

kelebihan :

• Bahasa yang lintas platform, jadi html dapat di gunakan pada berbagai jenis mesin komputer dan berbagai jenis sistem operasi
• Html bisa bersifat dinamis. Jadi contoh html bisa di sisipkan gambar dinamis seperti gambar gif.
• Dapat di sisipkan berbagai bahasa pemograman seperti Perl, php, javascript, VBScript dan banyak bahasa lainya yang bisa di sisipkan

Kekurangan :

• Tidak bisa menghasilkan halaman yang interaktif. Maksudnya di sini client tidak bisa bisa berinteraksi kepada server. Untuk keperluan itu html perlu di sisipkan bahasa pemograman seperti perl.
• Memiliki banyak tag-tag yang mungkin akan sulit di pahami orang-orang awan.

Nah jadi itulah sekilas tentang HTML Baik kelebihan kekurangan dan pengertianya

CSS(Cascading Style Sheet)

Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web yang akan lebih terstruktur dan seragam. CSS bukan bahasa pemograman.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, tabel warna, batas ukuran, batas warna, warna hyperlink, warna mouse di atas, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya.  CSS adalah bahasa style sheet yang digunakan untuk mengatur dokumen. Dengan ketentuan CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Refrensi : https://id.wikipedia.org/wiki/Cascading_Style_Sheets

Kelebihan dan kekurangan CSS 

Kelebihan : 

• Satu CSS dapat digunakan banyak halaman web.
• Dapat mempercantik tampilan di html jadi istilahnya css ini kaya baju, celana, kacamata dll dan html sendiri hanya tulang-tulangnya saja kalo pengandainya manusia lo ya haha :)
• Bisa mengatur desain se efesien mungkin

Kekurangan : 

• Ada beberapa browser yang tidak support CSS
• Kadang tampilan berbeda di browser yang lain nah untuk kasus itu kita perlu menambahkan vendor prefix
• Di butuhkan waktu yang cukup lama untuk membuatnya

Nah jadi itulah sekilas tentang CSS Baik kelebihan kekurangan dan pengertianya

Corousel

Selanjutnya apa itu corousel? Corousel atau juga bisa disebut slideshow merupakan proses menampilkan gambar yang di beri efek atau animasi slide. Banyak juga website-website yang mengunakan corousel ini untuk mempromosikan produk unggulanya. Dan biasanya corousel ini di letakkan atau di buat di bagian depan halaman website. Jadi itulah sedikit pengertian dari corousel.

Baiklah sekarang kita langsung cus aja buat corousenya, Seperti biasa kalian bisa buka terlebih dahulu text editor kalian dan buat satu file baru terserah kalian mau ngasih nama apa. Tapi admin kali ini akan memberi namaya adalah index.html. Setelah selesai kita akan membuat struktur dasar html seperti biasa. 

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

Setelah selesai kita membuat struktur dasar html, maka langkah selanjutnya adalah membuat sebuah div dengan nama class muter-satu dan di dalamnya ada div dengan class muter-dua dan di dalam div dengan class muter-dua ini kita tambahkan tag figure dan image.

Jika kalian masih belum paham kalian bisa lihat scriptnya di bawah ini.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="muter-satu"> <div class="muter-dua"> <figure><img src="img/dua.jpg"></figure> <figure><img src="img/satu.jpg"></figure> <figure><img src="img/bg-1.jpg"></figure> <figure><img src="img/satu.jpg"></figure> <figure><img src="img/empat.png"></figure> <figure><img src="img/tiga.jpg"></figure> <figure><img src="img/img-1.jpg"></figure> <figure><img src="img/empat.png"></figure> <figure><img src="img/empat.png"></figure> <figure><img src="img/satu.jpg"></figure> </div> </div>
</body>
</html>

langkah selanjutnya adalah menambah kan sytle di class-class yang telah kita buat sebelumnya yaitu class muter-satu, muter-dua dan tentunya kita juga akan menambahkan style di tag figure dan img.
Dan style pertama yang akan kita tambahkan adalah style di bagian class muter-satu dan muter-dua dan kita juga akan membuat sebuah keyframes animasi nya juga sekalian.

Dan style yang akan kita kasih di class muter-satu dan class muter-dua yang pasti adalah ukuran dari corousel yang akan kita buat ini. dan untuk class muter-satu kita juga akan mengatur posisi nya juga. Dan untuk class muter-dua nanti kita akan buat dia menampung keyframes animasi yang akan kita buat. Untuk lebih jelasnya kalian bisa lihat script di bawah ini.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
        <style>

.muter-satu {
width: 260px;
position: relative;
margin: auto;
perspective: 1900px;
}
.muter-dua {
width: 80%;
transform-style: preserve-3d;
position: absolute;
animation: muter 15s infinite linear;
}
@keyframes muter {
0% {
transform: rotateY(0deg);
} 100% {
transform: rotateY(360deg);
}

}
</style>
</head>
<body>
<div class="muter-satu"> <div class="muter-dua"> <figure><img src="img/dua.jpg"></figure> <figure><img src="img/satu.jpg"></figure> <figure><img src="img/bg-1.jpg"></figure> <figure><img src="img/satu.jpg"></figure> <figure><img src="img/empat.png"></figure> <figure><img src="img/tiga.jpg"></figure> <figure><img src="img/img-1.jpg"></figure> <figure><img src="img/empat.png"></figure> <figure><img src="img/empat.png"></figure> <figure><img src="img/satu.jpg"></figure> </div> </div>
</body>
</html>

Setelah selesai kita menambahkan style di class muter-satu dan muter-dua. Kita akan mulai menambahkan style di tag figure dan img. Seperti di class muter-satu dan muter-dua kita juga akan mengatur lebar tag figure dan img atau gambar yang akan kita tampilkan nanti. Dan kita juga akan langsung menambahkan animasi 3D nya dengan atribut transform yang telah di sediakan oleh CSS3.

Untuk lebih jelasnya kita kalian bisa lihat script di bawah ini

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
        <style>

.muter-satu {
width: 260px;
position: relative;
margin: auto;
perspective: 1900px;
}
.muter-dua {
width: 80%;
transform-style: preserve-3d;
position: absolute;
animation: muter 15s infinite linear;
}
.muter-dua:hover {
animation-play-state: paused;
cursor: pointer;
}
.muter-dua figure {
width: 100%;
height: 150px;
position: absolute;
box-shadow: 0 0 15px 0 black;
overflow: hidden;
}

.muter-dua figure:nth-child(1){ transform: rotateY(0deg) translateZ(300px) }
.muter-dua figure:nth-child(2){ transform: rotateY(40deg) translateZ(300px) }
.muter-dua figure:nth-child(3){ transform: rotateY(80deg) translateZ(300px) }
.muter-dua figure:nth-child(4){ transform: rotateY(120deg) translateZ(300px) }
.muter-dua figure:nth-child(5){ transform: rotateY(160deg) translateZ(300px) }
.muter-dua figure:nth-child(6){ transform: rotateY(200deg) translateZ(300px) }
.muter-dua figure:nth-child(7){ transform: rotateY(240deg) translateZ(300px) }
.muter-dua figure:nth-child(8){ transform: rotateY(280deg) translateZ(300px) }
.muter-dua figure:nth-child(9){ transform: rotateY(320deg) translateZ(300px) }
.muter-dua figure:nth-child(10){ transform: rotateY(360deg) translateZ(300px) }

@keyframes muter {
0% {
transform: rotateY(0deg);
} 100% {
transform: rotateY(360deg);
}
}

.muter-dua figure img {
width: 100%;
transition: all 0.5s ease-in;
height: 100%;
}

.muter-dua figure img:hover {
transition: all 0.5s ease;
filter: grayscale(1);
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="muter-satu"> <div class="muter-dua"> <figure><img src="img/dua.jpg"></figure> <figure><img src="img/satu.jpg"></figure> <figure><img src="img/bg-1.jpg"></figure> <figure><img src="img/satu.jpg"></figure> <figure><img src="img/empat.png"></figure> <figure><img src="img/tiga.jpg"></figure> <figure><img src="img/img-1.jpg"></figure> <figure><img src="img/empat.png"></figure> <figure><img src="img/empat.png"></figure> <figure><img src="img/satu.jpg"></figure> </div> </div>
</body>
</html>

Jadi itulah script ke seluruhanya. Kalian juga bisa langsung cek untuk melihat hasilnya. Mungkin sekian dahulu tutorial yang admin berikan. Semoga bermanfaat bagi kalian dan seperti biasa jika kalian suka kalian bisa shere ke temen-temen kalian mungkin yang membutuhnya. Jangan lupa juga untuk follow blog ini dan juga nyalakan pemberitahuan blog ini ya. Sekian dari admin. Wasallam.