Membuat Animasi Teks Berputar Efek 3D

Membuat Animasi Teks Berputar Efek 3D - Efek gerak pada sebuah teks hanya bisa dihasilkan dengan penggunaan CSS-animasi, dari efek berputar, efek berjalan dan hover show. Sedangkan rotate, preserve-3d, falling effect dan lain sebagainya merupakan sebuah atribut untuk menentukan gaya atau style efek. Yang terpenting adalah nilai efek yang akan Anda ciptakan, seperti tampilan teks kali ini, saya akan coba membuat animasi teks berputar dengan Efek 3D (3 Dimensi).

Namun sebelumnya, saya akan membahas sedikit ulasan tentang bentuk dan ragam efek animasi yang dapat kita buat, diantaranya:

1. Motion Anime
Ini merupakan objek gerak pada sebuah simbol, yang berfungsi untuk menerangkan perasaan dengan gambar bergerak (motion effect). Dan efek seperti ini sering kita gunakan untuk mengganti teks pada kolom komentar seperti "Smile" yang kita tulis dengan simbol :)


2. Animasi Marquee
Pergerakan objek dengan penggunaan kode <marquee>...</marquee> sudah dapat membuat objek dapat bergerak, namun karena penggunaan efek ini tidak semua peramban dapat mendeteksi, animasi marquee sudah sangat jarang digunakan sebagai penghasil efek gerak.
Hasilnya Baca - Mempercantik Tampilan Blog Dengan Membuat Teks Berjalan


3. Animasi Fade
Animasi gerak dengan cara pemudaran elemen objek, seperti objek akan berubah pudar saat digerakkan atau sebaliknya. Animasi seperti ini juga bisa dikategorikan sebagai fade in (pemudaran ke dalam) dan fade out (pemudaran keluar).
Hasilnya Baca - Kumpulan Ragam Efek Pada Gambar


4. Blink
Blink adalah efek gerak dengan style "berkedip". Biasanya efek ini banyak digunakan untuk menarik perhatian, seperti membuat banner, tampilan gambar space Iklan dan lain sebagainya.
Hasilnya Baca - Menciptakan Efek Pelangi Pada Text


5. Transform Shape
Gerakan untuk mengubah bentuk objek menjadi objek lain dan berbeda, seperti gambar menjadi teks dan teks menjadi gambar. Animasi seperti ini disebut juga dengan Morph Effect.
Hasilnya Baca - Membuat Teks Descripsi Pada Gambar Hover


6. Animasi Rotasi (Berputar)
Seperti efek gerak putaran pada jarum jam, baling-baling dan lainnya, efek seperti ini disebut animasi rotasi.
Dan Hasilnya:




DEMO SHOW



Buat sahabat setia pecinta SAHABAT BLOGGER 77, barang kali menginginkan efek rotasi seperti ini untuk Membuat Animasi Teks Berputar Efek 3D, cukup Copy kode elemen dibawah ini, lalu tempatkan dimana Anda ingin menampilkannya seperti ini:

<style type="text/css">
@-webkit-keyframes spinner {
  from {-webkit-transform: rotateY(0deg);}
  to {-webkit-transform: rotateY(-360deg);}}

@-ms-keyframes spinner {
  from {-ms-transform: rotateY(0deg);}
  to {-ms-transform: rotateY(-360deg);}}

@-o-keyframes spinner {
  from {-o-transform: rotateY(0deg);}
  to {-o-transform: rotateY(-360deg);}}

@keyframes spinner {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(-360deg);}}

@-moz-keyframes spinner {
  from {-moz-transform: rotateY(0deg);}
  to {-moz-transform: rotateY(-360deg);}}

#stage {
  margin: 1em auto;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  perspective: 1200px;
  background: rgba(0,0,0,0.5);}

#spinner, #spinner p {
  background: rgba(0,0,0,0.5);
  text-align: center;
  color: #fff;
  -webkit-animation-name: spinner;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;

  -moz-animation-name: spinner;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 6s;

  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 6s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;}

#spinner:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;}
</style>
<div id="stage">
   <p id="spinner">
       Hover Me.!! To Stop
   </p>
</div>

Anda bisa mengambil alternatif untuk mengganti teks dengan ucapan "Well Come To My Blog" misalnya, lalu tempatkan diarea wilayah Header atau halaman Beranda.
Dan semoga Cara Membuat Animasi Teks Berputar Efek 3D pada kesempatan kali ini dapat memberikan manfaat buat sahabat semua. Happy blogging guys..!!