dice New

✨ ANUWAT PRASIT

<!DOCTYPE html>
<html>
  <head>
    <title>Dice spinner</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
     <div id="perspective">
    	<div class="board">
      	<img src="https://media.discordapp.net/attachments/938320406736146453/938420864905519114/hilo.png?width=1014&height=676"/> 
      </div>
    </div>
  </body>

  <body>
    <div id="perspective">
    <div id="die-1" class="die">
        <div class="face face-1">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327352071565332/d1.png"/>
        </div>
        <div class="face face-2">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351903805470/d2.png"/>
        </div>
        <div class="face face-3">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351744401408/d3.png"/>
        </div>
        <div class="face face-4">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351526322187/d4.png"/>
        </div>
        <div class="face face-5">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351278829588/d5.png"/>
        </div>
        <div class="face face-6">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351064928266/d6.png"/>
        </div>
    </div>
</div>
  </body>
  

  <body>
    <div id="perspective">
    <div id="die-2" class="die">
        <div class="face face-1">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327352071565332/d1.png"/>
        </div>
        <div class="face face-2">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351903805470/d2.png"/>
        </div>
        <div class="face face-3">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351744401408/d3.png"/>
        </div>
        <div class="face face-4">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351526322187/d4.png"/>
        </div>
        <div class="face face-5">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351278829588/d5.png"/>
        </div>
        <div class="face face-6">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351064928266/d6.png"/>
        </div>
    </div>
</div>
  </body>
  

  <body>
    <div id="perspective">
    <div id="die-3" class="die">
        <div class="face face-1">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327352071565332/d1.png"/>
        </div>
        <div class="face face-2">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351903805470/d2.png"/>
        </div>
        <div class="face face-3">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351744401408/d3.png"/>
        </div>
        <div class="face face-4">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351526322187/d4.png"/>
        </div>
        <div class="face face-5">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351278829588/d5.png"/>
        </div>
        <div class="face face-6">
           <img src="https://media.discordapp.net/attachments/938320406736146453/938327351064928266/d6.png"/>
        </div>
    </div>
</div>
  </body>
</html>
<style>
:root {
    --face-size: 100px;
    --dot-size: calc(var(--face-size) * 0.225);
    
    background-color: rgba(175, 175, 175, 0.25);
}

/* กำหนดขนาดตอนหมุนไม่งั้นจะยืดดดดดด */

#perspective {
    position: absolute;
    
    perspective: 2000px;
}

/* อนิเมชั่นหมุนๆ */

@keyframes spin {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    
    to {
        transform: rotateX(360deg) rotateY(720deg);
    }
}
@keyframes move {
    from {transform: translate(0px)}
    to {transform:}

}
  
/* ตำแหน่งที่วาง*/

#die-1 {
    left: 700px;
    top: 200px;
}
  
#die-2 {
    left: 900px;
    top: 200px;
}
  
#die-3 {
    left: 1100px;
    top: 200px;
}
.die {
    position: absolute;
    
    width: var(--face-size);
    height: var(--face-size);
    
    transform-style: preserve-3d;
    
    animation: spin 5s linear 2s infinite;
}
.die:hover {
animation-play-state: paused;
}

/* จัดแต่งหน้าลูกเต๋า สี หรือขอบไรงี้ */

.face {
    position: absolute;
    width: var(--face-size);
    height: var(--face-size);

text-align: center;
    line-height: var(--face-size);
    
    border: 1px solid black;
    
    transform-style: preserve-3d;
    
    background-color: white;
}
  .board{
    background: white;
    position: absolute;
    left: 450px;
    top: 100px;
    transform-style: preserve-3d;
    transform: rotateX(70deg);
    margin: auto ;
    animation: move 5s infinite alternate;

}
  /* ตำแหน่งเหลี่่ยมแต่ละอัน */

.face-1 {
    transform: translateZ(calc(var(--face-size) / -2)) rotateY(180deg);
}
.face-2 {
    transform: translateX(50%) rotateY(90deg);
}
.face-3 {
    transform: translateX(-50%) rotateY(-90deg);
}
.face-4 {
    transform: translateY(50%) rotateX(90deg);
}
.face-5 {
    transform: translateY(-50%) rotateX(-90deg);
}
.face-6 {
    transform: translateZ(calc(var(--face-size) / 2));
}