Labkom99.com – Kali ini belajar untuk membuat efek animasi tesk 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.

Membuat Efek Animasi Teks 3D Keren Dengan HTML Dan CSS3

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 LanguageStruktur 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 :



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: 'HTML\A  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: 'HTML\A 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 tesk 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: 'HTML\A  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 ......!!!!!!

Komentar