CSS3 de gelen yeni özelliklerle basit 3d işlemler artık yapabiliyoruz.Bunu göstermek amaçlı bir 3d örneği yaptım.Çok fazla kod karmaşıklığı olmasın diye sadece chrome uyumu yaptım.Chrome de çalıştırıp bakabilirsiniz.İlerde kapsamlı bir şekilde anlatacam 3D yi.
İndir : http://ustaderslik.com/dosya/CSS%203D%20Dönüş.rar
Görüntüsü :
Kodlar :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AnaSayfa</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$(".ana").css({"-webkit-animation-name":"sag"});
$(".ana").css({"-webkit-animation-duration":"3s"});
$(".ana").css({"-webkit-animation-direction":"alternate"});
$(".ana").css({"-webkit-animation-iteration-count":"infinite"});
});
});
</script>
<style type="text/css">
.ana2{width:400px;height:300px;position:relative;margin:auto;-webkit-perspective:1000px;top:150px;}
.ana{width:400px;height:300px;position:absolute;position:relative;-webkit-transform-style: preserve-3d ;}
#a{width:100%;height:100%;position:absolute;-webkit-transform: rotateY(0deg) translateZ(200px) }
#b{position:absolute; width:100%;height:100%;-webkit-transform: rotateY(-90deg) translateZ(200px) }
#c{position:absolute; width:100%;height:100%;-webkit-transform: rotateY(90deg) translateZ(200px);}
@-webkit-keyframes sag{
0%{-webkit-transform: rotateY(0deg) rotateX(0deg); }
50%{-webkit-transform: rotateY(90deg) rotateX(90deg); }
100%{-webkit-transform: rotateY(-90deg) rotateX(-90deg); }
}
</style>
</head>
<body>
<div class="ana2">
<div class="ana">
<img id="b" src="1.jpg" />
<img id="a" src="2.jpg" />
<img id="c" src="3.jpg" />
</div>
</div>
<button>dön</button>
</body>
</html>
UstaDerslik
