JSFiddle - React, Tailwind, and code Playground

by Stéphane LEGRAND

HTML

<div id="wrapper" style="margin-top:200px;">
 
 
 
    <div class="carrousel">
        <div class="plan p1"><img src="image/slide1.jpg" width="712" height="264" /></div>
        <div class="plan p2"><img src="image/slide2.jpg" width="712" height="264" /></div>
        <div class="plan p3"><img src="image/slide3.jpg" width="712" height="264" /></div>
        <div class="plan p4"><img src="image/slide4.jpg" width="712" height="264" /></div>
        <div class="plan p5"><img src="image/slide5.jpg" width="712" height="264" /></div>
        <div class="plan p6"><img src="image/slide6.jpg" width="712" height="264" /></div> 
        <div class="plan p7"><img src="image/slide7.jpg" width="712" height="264" /></div>
        <div class="plan p8"><img src="image/slide8.jpg" width="712" height="264" /></div>
    </div>
 
  </div>

CSS

#wrapper{
  width:600px;
  -webkit-perspective: 800;
  margin: 150px auto 0 auto;
}
 
.carrousel{
  width: 200px;
  height: 200px;
  margin: 0 auto;
  -webkit-transform-style: preserve-3d;
  -webkit-animation: Caroussel 10s infinite linear;
   
}
 
.plan{
  position:absolute;
  height: 200px;
  width: 150px;
  text-align:center;
  font-size: 8em;
  color:#FFF;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
}
 
   
@-webkit-keyframes Caroussel{
   
  from { -webkit-transform: rotateY(0); }
  to { -webkit-transform: rotateY(360deg); }
}
 
 
 
.p1{ -webkit-transform: translateZ(200px);}
.p2{ -webkit-transform: rotateY(45deg) translateZ(200px);}
.p3{ -webkit-transform: rotateY(90deg) translateZ(200px);}
.p4{ -webkit-transform: rotateY(135deg) translateZ(200px);}
.p5{ -webkit-transform: rotateY(180deg) translateZ(200px);}
.p6{ -webkit-transform: rotateY(225deg) translateZ(200px);}
.p7{ -webkit-transform: rotateY(270deg) translateZ(200px);}
.p8{ -webkit-transform: rotateY(315deg) translateZ(200px);}