<!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>