Yazılım Örnekleri

Evet bu css örneğmizde sizlere 3d slayt kodlarını göstereceğim. width ve height kodlarıyla oyanama yaparak daha yaratıcı slayt çıkarılabilir.

<style>
#ana{
    margin-top:100px;
    width:1400px;
    perspective:1300px;
    margin-left:-340px;
    }
#ana figure, #ana img{
    height:144px;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
    transform-origin:center center -220px;
    -webkit-transform-origin:center center -220px;
    }
#ana figure img{
    width:220px;
    position:absolute;
    left:500px;
    }
#ana img:nth-child(1){
    transform:rotateY(0deg) translateZ(120px);
    -webkit-transform:rotateY(0deg) translateZ(120px);
    }
#ana img:nth-child(2){
    transform:rotateY(72deg) translateZ(120px);
    -webkit-transform:rotateY(72deg) translateZ(120px);
    }
#ana img:nth-child(3){
    transform:rotateY(144deg) translateZ(120px);
        -webkit-transform:rotateY(144deg) translateZ(120px);
        }
#ana img:nth-child(4){
    transform:rotateY(216deg) translateZ(120px);
        -webkit-transform:rotateY(216deg) translateZ(120px);
        }
#ana img:nth-child(5){
    transform:rotateY(288deg) translateZ(120px);
        -webkit-transform: rotateY(288deg) translateZ(120px);
        }
#ana figure{
    transition:all 0.9s linear;
    -webkit-transition:all 0.9s linear;
    }
#ana:hover figure{
    animation: donus 20s linear infinite;
    -webkit-animation: donus 20s linear infinite;
    }
@keyframes donus{
    100%{ transform:rotateY(360deg);}
    }
@-webkit-keyframes donus{
    100%{ -webkit-transform:rotateY(360deg);}
    }
</style>

<div id="ana">
<figure>
<img src="img/1.jpg" alt="" />
<img src="img/2.jpg" alt=""/>
<img src="img/3.jpg" alt=""/>
<img src="img/4.jpg" alt=""/>
<img src="img/2.jpg" alt=""/>
</figure>
</div>