CSS3 3D Dönme Merkezi
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 Dönme Merkezi

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2283)
RAPOR ET
CSS3 de döndürme işlemi yaparken tam ortada döndürme yapar.Bazen köşeden döndürmek isteyebiliriz.Bunun için şöyle bir yöntem yaptım.Döndürme işlemini yaparken dönen objenin width değerinin yarısı kadar geri aldırırsak sanki köşeden dönüyomuş gibi olur.

İncele : http://ustaderslik.com/ornek/3d_kose.html
Örneği webkit destekli chrome-yandex ve safaride deneyin.

Kodlar :

<!DOCTYPE html>
<html lang="en">
<head>
<title>cArleone</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){

})
</script>
<style type="text/css">
.b{width:500px;height:200px;margin:auto;margin-top:100px;-webkit-transform-style: preserve-3d;-webkit-perspective:3000px;}//transform-style ile 3d işlem yapacağız diyoruz.perpectivle derinlik veriyoruz alanımıza
.k1{width:250px;height:200px; background:gray;-webkit-transform: translate3d(0px,0px,0px) ;-webkit-animation: a 3s infinite;}
.k2{width:250px;height:200px; background:gray;-webkit-transform: translate3d(250px,-200px,0px);-webkit-animation: b 3s infinite;}//alanlarımızı pozisyonlandırıyoruz.
.k3{width:500px;height:200px; -webkit-transform: translate3d(0px,-400px,-100px) ;background:url(http://l1310.hizliresim.com/1g/d/tj18z.jpg); background-size:500px 200px;}

@-webkit-keyframes a {
0% { -webkit-transform:translate3d(0px,0px,0px) rotateY(0deg);}
100% { -webkit-transform:translate3d(-125px,0px,0px) rotateY(90deg); }
}
//2 keyframes animasyonla alanlarımızı 90 derece döndürüp 125 ps zıt yönlere hareket ettiriypruz.Böylelikle köşeden dönmüş hissi veriyoruz.
@-webkit-keyframes b {
0% { -webkit-transform:translate3d(250px,-200px,0px) rotateY(0deg);}
100% { -webkit-transform:translate3d(375px,-200px,0px) rotateY(-90deg); }
}
</style>
</head>
<body>

<div class="b">
<div class="k1"></div>
<div class="k2"></div>
<div class="k3"></div>
</div>

</body>
</html>


Bu şekilde dönme merkezini köşe yapabiliriz.



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