<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <!-- for more info please get touch with me by droping a email to me akj114912@gmail.com --> <div id="wrapper"> <div id="image"> <div class="image i1"><!-- <img src="images/hdr1.jpg"> --></div> <div class="image i2"><!-- <img src="images/hdr2.jpg"> --></div> <div class="image i3"><!-- <img src="images/hdr3.jpg"> --></div> <div class="image i4"><!-- <img src="images/hdr5.jpg"> --></div> <div class="image i5"><!-- <img src="images/hdr1.jpg"> --></div> <div class="image i6"><!-- <img src="images/hdr3.jpg"> --></div> <div class="image i7"><!-- <img src="images/hdr4.jpg"> --></div> <div class="image i8"><!-- <img src="images/hdr2.jpg"> --></div> </div> </div> </div> </div>

body { background: #eee; font-family: arial, helvetica, sans-serif; margin: 50px auto; padding: 0; } #wrapper { width: 960px; margin: 0 auto; } #wrapper { perspective: 2500; -webkit-perspective: 2500; width: 800px; margin: 200px auto 0 auto; perspective-origin: 50% 150px; -webkit-perspective-origin: 50% 150px; transition: perspective, 1s; -o-transition: -o-perspective, 1s; -moz-transition: -moz-perspective, 1s; -webkit-transition: -webkit-perspective, 1s; } #image:hover { animation-play-state:paused; -o-animation-play-state:paused; -moz-animation-play-state:paused; -webkit-animation-play-state:paused; } @-webkit-keyframes spin { from { transform: rotateY(0); -o-transform: rotateY(0); -ms-transform: rotateY(0); -moz-transform: rotateY(0); -webkit-transform: rotateY(0); } to { transform: rotateY(-360deg); -o-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -webkit-transform: rotateY(-360deg); } } #image { margin: 0 auto; height: 300px; width: 400px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; animation: spin 24s infinite linear; -moz-animation: spin 24s infinite linear; -o-animation: spin 24s infinite linear; -webkit-animation: spin 24s infinite linear; } .image { position: absolute; height: 100%; width: 100%; text-align: center; font-size: 20em; color: #fff; } #image > .i1 { background: #49c5b6; transform: translateZ(485px); -moz-transform: translateZ(485px); -o-transform: translateZ(485px); -ms-transform: translateZ(485px); -webkit-transform: translateZ(485px); } #image > .i2 { background: #2b7970; transform: rotateY(45deg) translateZ(485px); -moz-transform: rotateY(45deg) translateZ(485px); -o-transform: rotateY(45deg) translateZ(485px); -ms-transform: rotateY(45deg) translateZ(485px); -webkit-transform: rotateY(45deg) translateZ(485px); } #image > .i3 { background: #ffc907; transform: rotateY(90deg) translateZ(485px); -moz-transform: rotateY(90deg) translateZ(485px); -o-transform: rotateY(90deg) translateZ(485px); -ms-transform: rotateY(90deg) translateZ(485px); -webkit-transform: rotateY(90deg) translateZ(485px); } #image > .i4 { background: #a1b400; transform: rotateY(135deg) translateZ(485px); -moz-transform: rotateY(135deg) translateZ(485px); -o-transform: rotateY(135deg) translateZ(485px); -ms-transform: rotateY(135deg) translateZ(485px); -webkit-transform: rotateY(135deg) translateZ(485px); } #image > .i5 { background: #b02d15; transform: rotateY(180deg) translateZ(485px); -moz-transform: rotateY(180deg) translateZ(485px); -o-transform: rotateY(180deg) translateZ(485px); -ms-transform: rotateY(180deg) translateZ(485px); -webkit-transform: rotateY(180deg) translateZ(485px); } #image > .i6 { background: #3099b4; transform: rotateY(225deg) translateZ(485px); -moz-transform: rotateY(225deg) translateZ(485px); -o-transform: rotateY(225deg) translateZ(485px); -ms-transform: rotateY(225deg) translateZ(485px); -webkit-transform: rotateY(225deg) translateZ(485px); } #image > .i7 { background: #ae3424; transform: rotateY(270deg) translateZ(485px); -moz-transform: rotateY(270deg) translateZ(485px); -o-transform: rotateY(270deg) translateZ(485px); -ms-transform: rotateY(270deg) translateZ(485px); -webkit-transform: rotateY(270deg) translateZ(485px); } #image > .i8 { background-color: #ff0002; transform: rotateY(315deg) translateZ(485px); -moz-transform: rotateY(315deg) translateZ(485px); -o-transform: rotateY(315deg) translateZ(485px); -ms-transform: rotateY(315deg) translateZ(485px); -webkit-transform: rotateY(315deg) translateZ(485px); }

//js not required here this is a without js porfomance By anil kumar chaudhay //you can get in toouch with me by droping a email by tyoing akj114912@gmail.com