Üç boyutlu ve hareketli bir yazı-efekti

Matteo Spinelli  tarafından   Css3 ve  on satırlık  javascript  kullanılarak hazırlanmış  olan bir yazı  örneği. Örnekte herhangi  bir resim kullanılmamış.  Sadece  gerekli  olan bölüme yazınızı  ekleyip  kullanıyorsunuz.

Javascript  yardımıyla oluşturulan  yazı  örneği  mousenin koordinatlarına  göre    hareket  ederek ortaya 3 boyutlu bir görünüm çıkmasını  sağlıyor.

Destekleyen tarayıcılar : Cherome, Safari, Firefox, Opera, İnternet Explorer 

Eğer Opera  yada internet  explorer  kullanarak bu yazıyı inceliyorsanız aşağıdaki videoda örneğin css3  destekli tarayıcılarda nasıl çalıştığını  görebilirsiniz.

Kullanım

• Head  etiketleri arasına eklemeniz gereken bölüm.

Css : 

<style type="text/css">
html, body { height:100% }
body, h1, h2, p { border:0; margin:0; padding:0; }
body {
	font-family: helvetica, arial, sans-serif;
	background-color:#444;
	background-image:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 300, from(#888), to(#444));
	background-image:-moz-radial-gradient(50% 50%, circle, #888 0px, #444 300px);
	background-size:100% 100%;
	-webkit-perspective:500px;
	-moz-perspective:500px;
}
a { color:#bbb; }
#text {
	position:absolute;
	width:600px;
	height:120px;
	left:50%;
	top:50%;
	margin-left:-300px;
	margin-top:-60px;
	text-align:center;
	text-transform:uppercase;
	-webkit-tranform:translateZ(0);
	-webkit-transition-duration:0.05s;
	-moz-tranform:translateZ(0);
	color:#f3f3f3;
	text-shadow:0 0 1px rgba(0,0,0,.2);
}

h1 {
	font-size:50px;
}

h2 {
	font-size:35px;
}

p {
	display:absolute;
	top:0;
	width:100%;
	text-align:center;
	padding:10px 0;
	font-size:12px;
	color:#aaa;
	text-shadow:0 -1px 0 rgba(0,0,0,0.1);
}
</style>

•  Body  etiketleri arasına eklemeniz gereken bölümler.

Html : 

<div id="text">
	<h1>Dynamic CSS 3D Text</h1>
	<h2>Mouseye  göre  hareket  eden</h2>
	<h2>3 boyutlu yaz&#x0131;</h2>
</div>

 JavaScript : 

<script type="text/javascript">
var text = document.getElementById('text'),
	body = document.body,
	steps = 7;
function threedee (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', threedee, false);
</script>