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..!!

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Membuat Animasi Teks Berputar Efek 3D
Ditulis oleh= Devy Indriyani
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

15 komentar

  1. :d :d.. efek ini yg pernah sy inspet tp nda ketemu kodnya..eee..pucuk dicinta si ucup pun tiba..

    BalasHapus
    Balasan
    1. hehe..!! langsung diangkut..

      Hapus
    2. hehe..lupa bawa speda..sukses Mba.. (k)

      Hapus
  2. Saya harus sering main2 ke blognya mbak Devy deh.. biar bisa belajar byk di sini. Maklumin ya mbak..soalnya sy baru banget ngeblog., hehe
    Salam kenal ya

    BalasHapus
    Balasan
    1. salam sukses mbak, kan sesama blogger harus saling berbagi

      Hapus
  3. Saya sih kurang suka sama animasi teks berputar seperti ini. Karna terlalu menggangu menurut saya. Tapi terima kasih loh sudah berbagi, mungkin bisa lebih bermanfaat buat yg lain.

    BalasHapus
  4. Saya sih kurang suka sama animasi teks berputar seperti ini. Karna terlalu menggangu menurut saya. Tapi terima kasih loh sudah berbagi, mungkin bisa lebih bermanfaat buat yg lain.

    BalasHapus
  5. wah,kelen2 ..... saya aja nggak bisa buat bgtuan, ,,, hehehe :-)

    BalasHapus
    Balasan
    1. itu tinggal di copy kodenya, pasti bisa.
      heheh..

      Hapus
  6. bagus sih, tetapi saya kurang suka saja... hehehehe

    BalasHapus
  7. Coba saya praktekin ya mbak :D

    BalasHapus
  8. lam kenal mbk.,,..,trimakasih.
    codenya di tempelkan di mana z,.,,.
    maklum baru belajar ngeblog.

    BalasHapus
    Balasan
    1. letakkan pada formulir HTML widget-gadget, atau dimana Anda kan menampilkannya, salah satu contoh seperti ini :

      Halaman Beranda

      Saya menempatkan kodenya pada widget halaman beranda/Home

      Hapus
  9. bagus sekali sangat bermanfaat

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK