test (Copy 13574)

✨ ANUWAT PRASIT

<html>
<div class="slider">
   <div class="rotator">
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/944129617491525673/1503649442.png" alt="items photo" />
      </div>
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/944129684487151617/AAAABeC5TDTjX23_ggnku96l6S9dOvDM8ESxTlgHkqYedmCrRdKC4nDc_6pIJ_zEXTcfC4_hxiXf4fvVcf-Z54xZJhOD7mHq.png?width=1202&height=676" />
      </div>
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/944129543776632853/2022-01-28_3.png?width=1031&height=676" alt="items photo" />
      </div>
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/944129453133561866/sewew.png" alt="items photo" />
      </div>
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/936588381352251402/IMG_20220128_184735.jpg" />
      </div>
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/936584811018063932/9129009286f142280ca2281e40a95cc04e9a5abed7e5fb4d0511b7cb136a7d592b050cdd2719ff5f_rwc_0x1061x1659x1301x1659.png?width=859&height=676" alt="items photo" />
      </div>
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/936472988059041832/lala_gallery_01.png" alt="items photo" />
      </div>
      <div class="items">
         <img src="https://media.discordapp.net/attachments/910202302768484362/936472944757059645/lala_gallery_05.png" alt="items photo" />
      </div>
   </div>
</div>
<style>
.slider {
position: relative;
width: 350px;
margin: 50px auto;
perspective: 1000px;
padding-top: 120px;
}
.rotator {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 55%;
height: 150px;
transform-style: preserve-3d;
animation: roll 10s 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: 2px solid #333;
}
.items img {
height: 100%;
width: 100%;
}
.items:nth-child(1) {
transform: rotateY(calc(45deg * 1)) translateZ(235px);
}
.items:nth-child(2) {
transform: rotateY(calc(45deg * 2)) translateZ(235px);
}
.items:nth-child(3) {
transform: rotateY(calc(45deg * 3)) translateZ(235px);
}
.items:nth-child(4) {
transform: rotateY(calc(45deg * 4)) translateZ(235px);
}
.items:nth-child(5) {
transform: rotateY(calc(45deg * 5)) translateZ(235px);
}
.items:nth-child(6) {
transform: rotateY(calc(45deg * 6)) translateZ(235px);
}
.items:nth-child(7) {
transform: rotateY(calc(45deg * 7)) translateZ(235px);
}
.items:nth-child(8) {
transform: rotateY(calc(45deg * 8)) translateZ(235px);
}

</html>