C-New

✨ PHURIWAT PITIPONGMONTRI

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="./style.css">
   <title>QE_1</title>
  <style>
    body{
    background-image: url("https://1.bp.blogspot.com/-8EvJWvymMOQ/XxkPtu1v0RI/AAAAAAAADrc/BADX6ZF92OE0EEhkqYn8UQGHLfw9909vACLcBGAsYHQ/s1600/Galaxy%2Bwallpaper%2Bfor%2Blaptop%2Bhd%2Bultra%2B4k%2B%252823%2529.jpg");
    background-repeat: no-repeat; 
    background-size: cover;
    background-color: #000;
    /* max-width: 3500px; */
    /* background: 
  linear-gradient(45deg,  transparent 0%, transparent 57%, #423246 100%),
  linear-gradient(-45deg, #de53eb 0%,  #3bcde7 0.3%, #4C2556 112%,  transparent 11% ),
  linear-gradient(-90deg, #A14436 100%, #A14436 65%, transparent 20% )
  ; */
    
}

.slider {
    display: flex;
    position: relative;
    width: 300px;
    height: 150px;
    margin: auto;
    perspective: 700px;
    padding-top: 100px;
    z-index:1000;
    /* transform-style: preserve-3d;    */

}

.rotator {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: 10px;
    width: 50%;
    height: 50%;
    transform-style: preserve-3d;
    animation: roter 30s linear infinite;
    display: flex;
}
.rotator:hover {
    animation-play-state: paused;
    transform: rotateY(180deg) rotateZ(180deg);
    /* animation: roter 1s linear infinite; */
}
@keyframes roter {
    from {transform: rotateY(0deg);
}
    to {transform: rotateY(360deg);
    }
}
.items {
    position: absolute;
    height: 200px;
    width: 140px;
    overflow: hidden;
    border: 2px solid #333;
    transform: rotateY(calc(30deg * var(--i))) translateZ(300px);
    transition: 0.1s;
    /* background:hsl(calc(var(--i) * 30 + 13), 100%,68%); */
    /* background-image: url("https://st2.depositphotos.com/5647624/50508/i/600/depositphotos_505083626-stock-photo-golden-isolated-sparkles-or-glitter.jpg"); */
    background-image: url("https://media.discordapp.net/attachments/756527251117572168/939127712101056543/ezgif.com-gif-maker_5.gif");
    background-size: cover;
    border-radius: 10px;
    /* box-shadow: 0px 0px 3px 3px hsl(calc(var(--i) * 30 ), 100%, 60%); */
    animation: colors 1s linear infinite alternate;
    /* transform-style: preserve-3d; */
    
}
 .items:hover{
    /* transform: rotateZ(0deg) rotateZ(180deg); */
    animation-play-state: paused;
    /* box-shadow: 0px 0px 10px 10px hsl(calc(var(--i) * 30 ), 100%, 70%); */
    /* transform: rotateY(calc(30deg * var(--i))) translateZ(300px); */
}

.items-side{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    /* transform-style: preserve-3d; */
}
.items-front{
    border-radius: 6px;
}
.items-front img{
    height: 200px;
    width: 140px;
    opacity: 1;
}
/* .items-front:hover img{
    opacity: 1;
} */
.items-back{
    /* background:hsl(calc(var(--i) * 30 + 13), 100%,68%); */
    opacity: 1;
}
.items-back img{
    height: 200px;
    width: 140px;
    opacity: 1;
    transform: translateY(-200px);
    /* transition: all 3s ease; */
    /* background-size: cover; */
    /* transform: rotateY(calc(30deg * var(--i))) translateZ(300px); */
}

/* .items-back:hover img{
    opacity: 0;
} */

.items-front:hover img{
    /* animation: appear 1s infinite ease-in-out;
    animation-fill-mode: forwards; */
    opacity: 1;
    transition: 0.7s;
    transform: scale(1.2);
}
.items-back:hover img{
    /* animation: disappear 5s 1 ease-in-out;
    animation-fill-mode: forwards; */
    opacity: 0;
    transition: 0.7s;
}
.ufo{
    position: absolute;
}
.ufo img{
    animation: spin 3s infinite linear;
    height: 200px;
    width: 200px;
    transform-style: preserve-3d;
    z-index: 300;
}
.ufo:hover img{
    animation-play-state: paused;
    transition: 2s;
}
.star{
    display: flex;
    justify-content: center;
    align-items: center;
    
}

@keyframes colors{
    from{box-shadow: 0px 0px 10px 5px hsl(calc(var(--i) * 30 ), 100%, 20%);}
    to{box-shadow: 0px 0px 10px 5px hsl(calc(var(--i) * 30 ), 100%, 80%);}
}
@keyframes appear{
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes disappear{
    from {opacity: 0;}
    to {opacity: 1;}
}
.images{
    z-index:2;
    display: flex;
    justify-content: center;
    position: absolute;
}
.images-2{
    display: flex;
    justify-content: space-evenly;
}

.items:nth-child(1) {
--i:1;
}
.items:nth-child(2) {
--i:2;
}
.items:nth-child(3) {
--i:3;
}
.items:nth-child(4) {
--i:4;
}
.items:nth-child(5) {
--i:5;
}
.items:nth-child(6) {
--i:6;
}
.items:nth-child(7) {
--i:7;
}
.items:nth-child(8) {
--i:8;
}
.items:nth-child(9) {
--i:9;
}
.items:nth-child(10) {
--i:10;
}
.items:nth-child(11) {
--i:11;
}
.items:nth-child(12) {
--i:12;
}
    
/*@property --rotate {
        syntax: "<angle>";
        initial-value: 132deg;
        inherits: false;
    }*/

@keyframes spin {
    0% {
      transform: translateX(0px) translateY(0px)rotateY(0deg) scale(1.5) rotateZ(0deg);
    }
    25%{
        transform: translateX(550px) translateY(100px)  rotateY(360deg) scale(0.5) rotateZ(360deg);
        opacity:0.6;
    }
    50%{
        transform: translateX(1100px) translateY(0px)  rotateY(0deg) scale(1)rotateZ(720deg);
        opacity:0;
    }
    75%{
        transform: translateX(550px) translateY(-400px)  rotateY(360deg) scale(0.5)rotateZ(1080deg);
        opacity:0.7;
    }
    100% {
        transform: translateX(0px) translateY(0px)rotateY(0deg)scale(1.5) rotateZ(1440deg);
    }
}

/* div.items-side.items-back{
    background-color: red;
    /* transform: rotateX(180deg); 
    
} */
  </style>
</head>
<body>
<div class="container">
  <div class="images">
    <img class="img1" src="https://cdn.discordapp.com/attachments/939097757606613032/939124652083650570/Aries.png" style="width: 400px;">
    <img class="img1" src="https://cdn.discordapp.com/attachments/939097757606613032/939126396209479740/Caprico.png" style="width: 400px;">
    <img class="img1" src="" style="width: 300px;">
    <img class="img1" src="https://cdn.discordapp.com/attachments/939097757606613032/939126395743899718/Cancer.png"" style="width: 400px;">
    <img class="img1" src="https://cdn.discordapp.com/attachments/939097757606613032/939126396700205126/Gemini.png" style="width: 400px;">
  </div>
  <div class="container2" style="height: 300px;">
    <div class="slider">
      <img src=" style="margin-left: 500px; width: 500px;">
      <div class="rotator">
        <div class="items">
          <div class="items-side items-front">
              <img src="https://cdn.discordapp.com/attachments/938793295449055273/938795872278437968/1.png">
          </div>
          <div class="items-side items-back">
              <img src="https://media.discordapp.net/attachments/928271224868577331/939095432397725696/ded5c7d24302f5a1c8f180a509206342-removebg-preview.png?width=292&height=480">
          </div>
        </div>
        <div class="items">
          <div class="items-side items-front">
              <img src="https://cdn.discordapp.com/attachments/938793295449055273/938795906692698112/2.png">
          </div>
          <div class="items-side items-back">
              <img src="https://media.discordapp.net/attachments/928271224868577331/939095432397725696/ded5c7d24302f5a1c8f180a509206342-removebg-preview.png?width=292&height=480">
          </div>
        </div>
        <div class="items">
          <div class="items-side items-front">
            <img src="https://cdn.discordapp.com/attachments/938793295449055273/938795939265671248/3.png">
          </div>
          <div class="items-side items-back">
              <img src="https://media.discordapp.net/attachments/928271224868577331/939095432397725696/ded5c7d24302f5a1c8f180a509206342-removebg-preview.png?width=292&height=480">
          </div>
        </div>
        <div class="items">
          <div class="items-side items-front">
            <img src="https://cdn.discordapp.com/attachments/938793295449055273/938795976955670528/4.png">
          </div>
          <div class="items-side items-back">
              <img src="https://media.discordapp.net/attachments/928271224868577331/939095432397725696/ded5c7d24302f5a1c8f180a509206342-removebg-preview.png?width=292&height=480">
          </div>
        </div>
        <div class="items">
          <div class="items-side items-front">
            <img src="https://cdn.discordapp.com/attachments/938793295449055273/938796033297768488/5.png">
          </div>
          <div class="items-side items-back">
              <img src="https://media.discordapp.net/attachments/928271224868577331/939095432397725696/ded5c7d24302f5a1c8f180a509206342-removebg-preview.png?width=292&height=480">
          </div>
        </div>
        <div class="items">
          <div class="items-side items-front">
            <img src="https://cdn.discordapp.com/attachments/938793295449055273/938796046392377344/6.png">
          </div>
          <div class="items-side items-back">
              <img src="https://media.discordapp.net/attachments/928271224868577331/939095432397725696/ded5c7d24302f5a1c8f180a509206342-removebg-preview.png?width=292&height=480">
          </div>
        </div>
        <div class="items">
          <div class="items-side items-front">
            <img src="https://cdn.discordapp.com/attachments/938793295449055273/938796108279341106/7.png">
          </div>
          <div class="items-side items-back">
              <img src="https://media.discordapp.net/attachments/928271224868577331/939095432397725696/ded5c7d24302f5a1c8f180a509206342-removebg-preview.png?width=292&height=480">
          </div>
        </div>
        <div class="items">
          <div class="items-side items-front">
            <img src="https://cdn.discordapp.com/attachments/938793295449055273/938796119280979978/8.png">
          </div>
          <div class="items-side items-back">
              <img src="https://media.discordapp.net/attachments/928271224868577331/939095432397725696/ded5c7d24302f5a1c8f180a509206342-removebg-preview.png?width=292&height=480">
          </div>
        </div>
        <div class="items">
          <div class="items-side items-front">
            <img src="https://cdn.discordapp.com/attachments/938793295449055273/938796187824308275/9.png">
          </div>
          <div class="items-side items-back">
              <img src="https://media.discordapp.net/attachments/928271224868577331/939095432397725696/ded5c7d24302f5a1c8f180a509206342-removebg-preview.png?width=292&height=480">
          </div>
        </div>
        <div class="items">
          <div class="items-side items-front">
            <img src="https://cdn.discordapp.com/attachments/938793295449055273/938796199287357460/10.png">
          </div>
          <div class="items-side items-back">
              <img src="https://media.discordapp.net/attachments/928271224868577331/939095432397725696/ded5c7d24302f5a1c8f180a509206342-removebg-preview.png?width=292&height=480">
          </div>
        </div>
        <div class="items">
          <div class="items-side items-front">
            <img src="https://cdn.discordapp.com/attachments/938793295449055273/938796211455004722/11.png">
          </div>
          <div class="items-side items-back">
              <img src="https://media.discordapp.net/attachments/928271224868577331/939095432397725696/ded5c7d24302f5a1c8f180a509206342-removebg-preview.png?width=292&height=480">
          </div>
        </div>
        <div class="items">
          <div class="items-side items-front">
            <img src="https://cdn.discordapp.com/attachments/938793295449055273/938796218958622781/12.png">
          </div>
          <div class="items-side items-back">
              <img src="https://media.discordapp.net/attachments/928271224868577331/939095432397725696/ded5c7d24302f5a1c8f180a509206342-removebg-preview.png?width=292&height=480">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="images-1" style="margin-top: 100px;">
    <div class="ufo">
    <img src="https://media.discordapp.net/attachments/932854446721994782/939104380286799952/Pngtreeufo_space_ship_alien_clip_6136621.png">
    </div>
    <div class="star">
      <img src="https://cdn.discordapp.com/attachments/939097757606613032/939126398197563433/sagi.png" style="width: 300px;">
      <img src="https://cdn.discordapp.com/attachments/939097757606613032/939126397128036372/Leo.png" style="width: 300px;">
      <img src="https://cdn.discordapp.com/attachments/939097757606613032/939126397568421918/Libra.png" style="width: 300px;">
      <img src="https://cdn.discordapp.com/attachments/939097757606613032/939126397887205396/Pisces.png" style="width: 300px;">
      <img src="https://cdn.discordapp.com/attachments/939097757606613032/939126398600232990/Scopio.png" style="width: 300px;">
      <img src="https://cdn.discordapp.com/attachments/939097757606613032/939126395232219197/Aquarius.png" style="width: 300px; height: 300px;">
    </div>
  </div>
  <div class="images-2">
    <img src="https://cdn.discordapp.com/attachments/939097757606613032/939126407290814494/Taurus.png" style="width: 300px;">
    <img src="https://cdn.discordapp.com/attachments/939097757606613032/939126407496364123/Virgo.png" style="width: 300px;">
  </div>
</div>
</body>
</html>