3D-image-gallery

3D-image-gallery

3D-image-gallery :- This is presenting your image in best way  in 3D Rotating image gallery 



<!DOCTYPE html>
<html lang="en">
<head>
  <title>3d roteting image gallery</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  
<style>
  #round_slider{
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    animation: move 18s infinite linear;
}
#round_slider:hover{
    animation-play-state: paused;
}
#round_slider span{
    display: block;
    position: absolute;
    width: 92%;
    left: 10px;
    top: 10px;
    overflow: hidden;
    border: dotted 4px black;
}
#round_slider span:nth-child(1) {transform : rotateY(0deg)   translateZ(288px);}
#round_slider span:nth-child(2) { transform: rotateY(40deg)  translateZ(288px);}
#round_slider span:nth-child(3) { transform: rotateY(80deg)  translateZ(288px);}
#round_slider span:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#round_slider span:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#round_slider span:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#round_slider span:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#round_slider span:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#round_slider span:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}

#round_slider span img{
    -webkit-filter: blur(0);
    cursor: pointer;
    transition: all .5s ease;
}
#round_slider span img:hover{
    -webkit-filter: blur(1px);
    transform: scale(1.2,1.2);
}

@keyframes move{
    from{
        transform: rotateY(0deg);
    }
    to{
        transform: rotateY(360deg);
    }
}

  </style>  
</head>
<body>

<div class="container">
  <h2>3d roteting image gallery</h2>
     <div style="width:220px; margin: auto;position: relative;" >
        <div id="round_slider">
            <span><img src="http://www.stardusteservices.com/img/gallery/g1.jpg" alt="" height="150" ></span>
            <span><img src="http://www.stardusteservices.com/img/gallery/g8.jpg" alt="" height="150" ></span>
            <span><img src="http://www.stardusteservices.com/img/gallery/g7.jpg" alt="" height="150" ></span>
            <span><img src="http://www.stardusteservices.com/img/gallery/g6.jpg" alt="" height="150" ></span>
            <span><img src="http://www.stardusteservices.com/img/gallery/g5.jpg" alt="" height="150" ></span>
            <span><img src="http://www.stardusteservices.com/img/gallery/g6.jpg" alt="" height="150" ></span>
            <span><img src="http://www.stardusteservices.com/img/gallery/g7.jpg" alt="" height="150" ></span>
            <span><img src="http://www.stardusteservices.com/img/gallery/g8.jpg" alt="" height="150" ></span>
            <span><img src="http://www.stardusteservices.com/img/gallery/g1.jpg" alt="" height="150" ></span>
            
        </div>
   </div>
</div>

</body>
</html>

Demo

Download Hare

Total Coments (4)

  1. test
    • 16 Nov 2017

    [removed]alert('Injected!');[removed]

  2. wfw
    • 16 Nov 2017

  3. tgaqgtq
    • 16 Nov 2017

    [removed]alert(String.fromCharCode(88,83,83))[removed]

  4. sagha
    • 16 Nov 2017

    SELECT email, passwd, login_id, full_name FROM members WHERE email = 'x'; UPDATE members SET email = '[email protected]' WHERE email = '[email protected]';