Making 3D Dynamic Effect for Blogger

Pasti kawan² sudah sering lihat efek 3D menggunakan CSS 3. Ada yang memakai permanen, ada juga yang memakai ketika menghover cursor hover 3D effect. Tapi sobat sudah pada tahu belom nih, bahwasannya effect 3D pada text bisa dibikin menjadi dinamis! Jadi ketika cursor mengarah/didekatkan pada sekoloni teks, maka efek 3D akan terlihat berpindah berlawanan dengan keberadaan si cursor :-/
Okelah kalo begitu, sebelum masuk ke inti permasalahan, ada baiknya sobat melihat live demo apa, bagaimana, efek 3D pada teks itu :D Ce-gi-dot-pret-cess

Ini contoh penggunaan efek 3D memakai CSS3 attribute, guna memunculkan efek menonjol gitooo LOH!!!
Lihat dong tulisannya serasa menonjol or mengangkang, eh mengangkat mksdx -___-'

Terlihat efek bayangan menumpuk dan itulah yang membuat tulisan tersebut serasa terangkat. Sekarang bagaimana cara membuat effect 3D menjadi dinamis? Please look at here to cekidot-pret dynamic CSS 3D text :-bd
Tanpa banyak basa basi busuk, cari kode tag </body> kemudian letakan JavaScript dibawah ini tepat sebelumnya...

<script type="text/javascript">
//<![CDATA[
var text = document.getElementById('Blog1'),
 body = document.body,
 steps = 7;
function threeD (e) {
 var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)),
  y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)),
  shadow = '',
  color = 190,
  radius = 3,
  i;
 for (i=0; i<steps; i++) {
  tx = Math.round(x / steps * i);
  ty = Math.round(y / steps * i);
  if (tx || ty) {
   color -= 3 * i;
   shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), ';
  }
 }
 shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)';
 text.style.textShadow = shadow;
 text.style.webkitTransform = 'translateZ(0) rotateX (' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
 text.style.MozTransform = 'translateZ(0) rotateX (' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
}
document.addEventListener('mousemove', threeD, false);
//]]>
</script>

SAVE. Lihatlah hasil akhir :))

Penjelasan

<script type="text/javascript">
//<![CDATA[
var text = document.getElementById('UNIQUE-ID'),
body = document.body,
steps = 7;
function threeD (e) {
var x = Math.round(steps / (window.innerWidth / 2) * (window.innerWidth / 2 - e.clientX)),
y = Math.round(steps / (window.innerHeight / 2) * (window.innerHeight / 2 - e.clientY)),
shadow = '',
color = 190,
radius = 3,
i;
for (i=0; i<steps; i++) {
tx = Math.round(x / steps * i);
ty = Math.round(y / steps * i);
if (tx || ty) {
color -= 3 * i;
shadow += tx + 'px ' + ty + 'px 0 rgb(' + color + ', ' + color + ', ' + color + '), ';
}
}
shadow += x + 'px ' + y + 'px 1px rgba(0,0,0,.2), ' + x*2 + 'px ' + y*2 + 'px 6px rgba(0,0,0,.3)';
text.style.textShadow = shadow;
text.style.webkitTransform = 'translateZ(0) rotateX (' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
text.style.MozTransform = 'translateZ(0) rotateX (' + y*1.5 + 'deg) rotateY(' + -x*1.5 + 'deg)';
}
document.addEventListener('mousemove', threeD, false);
//]]>
</script>Perhatikan UNIQUE-ID!!! Dengan unik ID yang sobat buat, maka disanalah teks/kalimat harus terTAG. Misalkan kawan mau pakai unik-ID prikitiw
Pemakaian HTML menjadi spt brkt<div id="prikitiw">
BLA BLA BLA BLA BLA BLA BLA
</div>Jadi efek 3D dynamic tidak akan kemana-mana, hanya sebatas yang terTAG! Oleh sebab itu Koben masukan unikID Blog1 soalnya pada blogger emang itu ID unik pada sesi postingannya :))
Semoga paham lah ;))
Happy 3D effect \m/