Labkom99.com – Kali ini belajar untuk membuat efek Animasi Teks 3D keren dengan HTML dan CSS3 murni. Efek animasi yang sangat keren ini merupakan teks timbul 3D yang dihasilkan CSS3 murni . Karakter huruf dalam efek animasi ini dibuat seperti hufuf timbul. Seolah-olah diukir dari lempengan batu padahal ini adalah trik dari HTML dan CSS. Dan teks juga berayun maju mundur, efek animasinya sangat keren.
Alat / Bahan Baku
Notepad
Tools pemrograman HTML lain
Perhatian
Cara membuat efek animasi tesk 3D keren dibuat dengan sangat sederhana. Hanya menggunakan notepad untuk menuliskan kode HTML dan CSS3 yang digunakan. Untuk itu bagi pemula yang sedang belajar HTML harus memahami terlebih dahulu tentang Tutorial Belajar Dasar – Dasar HTML: Hypertext Markup Language, Struktur dasar HTML , cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas Bagaimana Cara Membuat Template HTML.
Beberapa artikel Labkom99 sebelumnya juga sudah menuliskan tentang cara membuat efek animasi dengan berbagai model dengan HTML dan CSS. Efek animasi keren dan mudah untuk di pelajari tentunya : Baca Juga :
- Membuat Efek Animasi Teks Berkedip Dengan HTML Dan CSS3
- Belajar HTML Dan CSS Membuat Animasi Cantik Pada Tulisan
- Belajar HTML Dan CSS3 Membuat Mouseover Zoom Dan Efek Thumbnail
- Membuat Efek Refleksi Membalik Gambar Dengan HTML Dan CSS3
- Membuat Teks Mirror Efek Bergetar Dengan HTML Dan CSS
- Membuat Efek Animasi Roket Meluncur Keren Dengan HTML5 CSS3 Dan SVG
- Belajar HTML5 Dan Canvas Membuat Efek Animasi Hue Ball Berbagai Warna
- Belajar HTML5 Dan Canvas Membuat Bola Api Luncur
- Membuat Efek Animasi Lampu Neon Pada Tesk Dengan HTML Dan CSS3
- Membuat Efek Gelombang Pada Teks Menggunakan Clip-Path HTML Dan CSS3
- Membuat Efek Animasi Tesk Kartun Dengan HTML CSS3 Dan Google Font
Metode / Langkah Sebelum membuat efek animasi tesk 3D keren dengan HTML dan CSS3 buka terlebih dahulu Notepad untuk menuliskan kode CSS dibawah ini :
@charset "UTF-8";
html, body {
min-height: 450px;
height: 100%;
}
body {
background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000000);
}
.stage {
height: 300px;
width: 500px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
perspective: 9999px;
transform-style: preserve-3d;
}
.layer {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
opacity: 0;
animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s, o_O 0.1s 1;
animation-fill-mode: forwards;
transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}
.layer:after {
font: 150px/0.65 'Pacifico', 'Kaushan Script', Futura, 'Roboto', 'Trebuchet MS', Helvetica, sans-serif;
content: 'HTMLA labkom99!';
white-space: pre;
text-align: center;
height: 100%;
width: 100%;
position: absolute;
top: 50px;
color: whitesmoke;
letter-spacing: -2px;
text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}
.layer:nth-child(1):after {
transform: translateZ(0px);
}
.layer:nth-child(2):after {
transform: translateZ(-2px);
}
.layer:nth-child(3):after {
transform: translateZ(-4px);
}
.layer:nth-child(4):after {
transform: translateZ(-6px);
}
.layer:nth-child(5):after {
transform: translateZ(-8px);
}
.layer:nth-child(6):after {
transform: translateZ(-10px);
}
.layer:nth-child(7):after {
transform: translateZ(-12px);
}
.layer:nth-child(8):after {
transform: translateZ(-14px);
}
.layer:nth-child(9):after {
transform: translateZ(-16px);
}
.layer:nth-child(10):after {
transform: translateZ(-18px);
}
.layer:nth-child(11):after {
transform: translateZ(-20px);
}
.layer:nth-child(12):after {
transform: translateZ(-22px);
}
.layer:nth-child(13):after {
transform: translateZ(-24px);
}
.layer:nth-child(14):after {
transform: translateZ(-26px);
}
.layer:nth-child(15):after {
transform: translateZ(-28px);
}
.layer:nth-child(16):after {
transform: translateZ(-30px);
}
.layer:nth-child(17):after {
transform: translateZ(-32px);
}
.layer:nth-child(18):after {
transform: translateZ(-34px);
}
.layer:nth-child(19):after {
transform: translateZ(-36px);
}
.layer:nth-child(20):after {
transform: translateZ(-38px);
}
.layer:nth-child(n+10):after {
-webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}
.layer:nth-child(n+11):after {
-webkit-text-stroke: 15px dodgerblue;
text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}
.layer:nth-child(n+12):after {
-webkit-text-stroke: 15px #0077ea;
}
.layer:last-child:after {
-webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}
.layer:first-child:after {
color: #fff;
text-shadow: none;
}
@keyframes ಠ_ಠ {
100% {
transform: rotateY(-40deg) rotateX(-43deg);
}
}
@keyframes o_O {
100% {
opacity: 1;
}
}Perhatikan pada .stage yang fungsinya untuk membuat layar 3D dengan atribut prespactive. Setiap elemen DIV yang akan yang akan dibuat menggunakan transform-style: preserve-3d; agar tesk memiliki lapisan 3D. Hanya saja browser IE belum begitu support untuk CSS3 seperti ini.
Kemudian untuk tesknya dituliskan pada CSS .layer:after { dan content: ‘HTMLA labkom99!’; karena memang menggunakan CSS murni. Dalam CSS yang digunakan ini setiap elemen diputar dalam sudut tertentu pada sumbu Z transform: translateZ(0px);.
Sehingga efek bayangan 3D akan di tambahkan pada elemen yang telah ditentukan. Untuk struktur HTML seperti yang sudah di jelaskan diatas menggunakan elemen DIV. Dengan Menempatkan 25 elemen DIV untuk menghasilkan efek bayangan 3D pada tesk. Untuk tesk itu sendiri di tuliskan pada CSS3 tanpa harus menuliskan pada elemen DIV pada HTML.
<div class='stage'>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
</div>Untuk demo membuat efek Animasi Teks 3D keren dengan HTML dan CSS3 bisa dilihat DISINI Dan untuk kode HTML dan CSS3 lengkapnya Dibawah ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Labkom99.com - Membuat Efek Animasi Teks 3D Keren Dengan HTML Dan CSS3 </title>
<style>
@charset "UTF-8";
html, body {
min-height: 450px;
height: 100%;
}
body {
background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000000);
}
.stage {
height: 300px;
width: 500px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
perspective: 9999px;
transform-style: preserve-3d;
}
.layer {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
opacity: 0;
animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s, o_O 0.1s 1;
animation-fill-mode: forwards;
transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}
.layer:after {
font: 150px/0.65 'Pacifico', 'Kaushan Script', Futura, 'Roboto', 'Trebuchet MS', Helvetica, sans-serif;
content: 'HTMLA labkom99!';
white-space: pre;
text-align: center;
height: 100%;
width: 100%;
position: absolute;
top: 50px;
color: whitesmoke;
letter-spacing: -2px;
text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}
.layer:nth-child(1):after {
transform: translateZ(0px);
}
.layer:nth-child(2):after {
transform: translateZ(-2px);
}
.layer:nth-child(3):after {
transform: translateZ(-4px);
}
.layer:nth-child(4):after {
transform: translateZ(-6px);
}
.layer:nth-child(5):after {
transform: translateZ(-8px);
}
.layer:nth-child(6):after {
transform: translateZ(-10px);
}
.layer:nth-child(7):after {
transform: translateZ(-12px);
}
.layer:nth-child(8):after {
transform: translateZ(-14px);
}
.layer:nth-child(9):after {
transform: translateZ(-16px);
}
.layer:nth-child(10):after {
transform: translateZ(-18px);
}
.layer:nth-child(11):after {
transform: translateZ(-20px);
}
.layer:nth-child(12):after {
transform: translateZ(-22px);
}
.layer:nth-child(13):after {
transform: translateZ(-24px);
}
.layer:nth-child(14):after {
transform: translateZ(-26px);
}
.layer:nth-child(15):after {
transform: translateZ(-28px);
}
.layer:nth-child(16):after {
transform: translateZ(-30px);
}
.layer:nth-child(17):after {
transform: translateZ(-32px);
}
.layer:nth-child(18):after {
transform: translateZ(-34px);
}
.layer:nth-child(19):after {
transform: translateZ(-36px);
}
.layer:nth-child(20):after {
transform: translateZ(-38px);
}
.layer:nth-child(n+10):after {
-webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}
.layer:nth-child(n+11):after {
-webkit-text-stroke: 15px dodgerblue;
text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}
.layer:nth-child(n+12):after {
-webkit-text-stroke: 15px #0077ea;
}
.layer:last-child:after {
-webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}
.layer:first-child:after {
color: #fff;
text-shadow: none;
}
@keyframes ಠ_ಠ {
100% {
transform: rotateY(-40deg) rotateX(-43deg);
}
}
@keyframes o_O {
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div class='stage'>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
<div class='layer'></div>
</div>
</body>
</html>Selamat Mencoba ……!!!!!!
