Halo, jumpa lagi dengan saya 🙂 apa kabarnya ? semoga baik yah, amin.
Pada artikel kali ini saya akan berbagi sedikit tutorial mengenai bagaimana Membuat Efek 3D Dengan CSS3, kalian pasti sudah tau bagaimana efek 3D itu, nah kalo kalian ingin membuat efek 3D dengan CSS tapi belum tau cara nya ? tidak ada salah nya untuk mengikuti praktik dibawah ini.
1. Buka dulu teks editor nya, kemudian ketikan kode HTML berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="container"> <div id="box1"> <div class="line"></div> <h1>BOX 1</h1> </div> <div id="box2"> <div class="line"></div> <h1>BOX 2</h1> </div> <div id="box3"> <div class="line"></div> <h1>BOX 3</h1> </div> </div> |
2. Kalo sudah, sekarang ketikan kode CSS3 berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
*{ -webkit-box-sizing: border-box; } h1{ font-size: 3em; font-family: helvetica neue; color: white; } h3{ font-size: 1.1em; font-weight: 300; color: white; line-height: 1.1em; } #box1, #box2, #box3{ padding: 1px 10px 5px 10px; width: 320px; height: 350px; margin: 2px; } #box1{ background: #00afde; opacity: .7; } #box2{ background: #fe5d41; opacity: .7; } #box3{ background: #cfc201; opacity: .7; } .line{ border-bottom: 1px solid white; height: 30px; position: relative; top: 35px; left: -10px; } /* 3D TRANSFORMATION ==============================*/ #container{ -webkit-transform-style: preserve-3d; -webkit-transform: rotateX(-20deg) rotateY(-40deg) perspective(1300px); } #box1{ -webkit-transform: translateX(0) translateY(400px) translateZ(-200px); } #box2{ -webkit-transform: translateX(0) translateY(0) translateZ(-400px); } #box3{ -webkit-transform:translateX(0) translateY(-400px) translateZ(-600px); } |
3. Kalo sudah, jangan lupa disimpan terlebih dahulu kemudian coba jalankan dibrowser nya, dan lihat hasilnya. Selesai
Cukup mudah yah membuat nya ? silahkan kalian bisa memodifikasi nya lagi, sekian artikel mengenai bagaimana Membuat Efek 3D Dengan CSS3 , semoga bermanfaat, amin.
Selamat mencoba 🙂