dice

✨ ANUWAT PRASIT

<html>
<div class="slider">
   <div class="rotator">
      <div class="items">
         <img src="https://cdn.pixabay.com/photo/2018/02/08/22/27/flower-3140492_960_720.jpg" alt="items photo" />
      </div>
      <div class="items">
         <img src="https://cdn.pixabay.com/photo/2016/08/09/21/54/yellowstone-national-park-1581879_960_720.jpg" />
      </div>
      <div class="items">
         <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" alt="items photo" />
      </div>
      <div class="items">
         <img src="https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297__340.jpg" alt="items photo" />
      </div>
   </div>
</div>
<style>
.slider {
position: relative;
width: 150px;
margin: 50px auto;
perspective: 1000px;
padding-top: 120px;
}
.rotator {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 150px;
transform-style: preserve-3d;
animation: roll 11s linear infinite;
}
.rotator:hover {
animation-play-state: paused;
}
@keyframes roll {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
.items {
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
border: 5px solid #333;
}
.items img {
height: 100%;
width: 100%;
}
.items:nth-child(1) {
transform: rotateY(calc(90deg * 1)) translateZ(80px);
}
.items:nth-child(2) {
transform: rotateY(calc(90deg * 2)) translateZ(80px);
}
.items:nth-child(3) {
transform: rotateY(calc(90deg * 3)) translateZ(80px);
}
.items:nth-child(4) {
transform: rotateY(calc(90deg * 4)) translateZ(80px);
}
</html>