CSS3 3D Küp örneğim
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS3 3D Küp örneğim

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2421)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/rw9nq.png

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>



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol