A-NEW Thanakorn phaophanat

✨ THANAKORN PHAOPHANAT

<!DOCTYPE html>
<html>
  <head>
    <title>Amazon.com</title>
  </head>
	<style>
     body{
		background: url(https://cdn.discordapp.com/attachments/908603814939082752/939010801170255924/-1x-1.png);
  background-position: center;
  background-size:cover;
  background-repeat: no-repeat;
  margin:50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
     .box-amazon {
  perspective: 500px;
}
     .box{
  width: 200px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 2s;
  animation: rotation-3d 10s infinite linear;
}

.box-side-front{
  position: absolute;
  width: 300px;
  height: 150px;
  background-image: url(https://cdn.discordapp.com/attachments/908603814939082752/939014634470535178/640px-Amazon_logo.png);
  background-size:120px;
  background-repeat: no-repeat;
  background-position:center;
  background-color: #ccad8b;
  border: 1.5px solid black;
}
.box-side-back{
  position: absolute;
  width: 300px;
  height: 150px;
  background-image: url(https://cdn.discordapp.com/attachments/908603814939082752/939021803035176970/amazon_smile._CB1198675309_.png);
  background-size:180px;
  background-repeat: no-repeat;
  background-position:center;
  background-color: #ccad8b;
  border: 1.5px solid black;
     }
.box-side-left{
  position: absolute;
  width: 150px;
  height: 150px;
  background-image: url(https://cdn.discordapp.com/attachments/908603814939082752/939022257676771408/GHJVWNW2YWQ5NMRT_Global_en-US.png);
  background-size:60px;
  background-repeat: no-repeat;
  background-color: #ccad8b;
  border: 1.5px solid black;
  background-position:left top;
     }
.box-side-right{
  position: absolute;
  width: 150px;
  height: 150px;
  background-image: url(https://cdn.discordapp.com/attachments/908603814939082752/939027510430146600/latest.png);
  background-size:160px;
  background-repeat: no-repeat;
  background-color: #ccad8b;
  border: 1.5px solid black;
  background-position:center bottom;
}
.box-side-top{
  position: absolute;
  width: 300px;
  height: 150px;
  background-color: #ccad8b;
  border: 1.5px solid black;
}
  .box-side-bottom{
  position: absolute;
  width: 300px;
  height: 150px;
  background-color: #ccad8b;
  border: 1.5px solid black;
  background-image:url(https://cdn.discordapp.com/attachments/908603814939082752/939025004299972668/Recycle-Emblem.png);
  background-size:150px;
  background-repeat:no-repeat;
  background-position:center;
     }
.khang-ghong{
  position: absolute;
  width: 320px;
  height: 180px;
  background-color: #ccad8b;
  border: 1.5px solid black;
  background-image: url();
  background-size:120px;
  background-repeat: no-repeat;
  background-position:center;
}
.box-side-front { transform: rotateY(0deg) translateZ(75px); }
.box-side-back { transform: rotateY(180deg) translateZ(75px); }
.box-side-left { transform: rotateY(-90deg) translateZ(75px); }
.box-side-right { transform: rotateY(90deg) translateZ(225px); }
.box-side-top { transform: rotateX(90deg) translateZ(75px); }
.box-side-bottom { transform: rotateX(-90deg) translateZ(75px); }
     
.box-khang-ghong-front { transform: rotateY(0deg) translateZ(90px) translateX(-10px);}
.box-khang-ghong-back { transform: rotateY(180deg) translateZ(90px) translateX(10px);}
.box-khang-ghong-left { transform: rotateY(-90deg) translateZ(100px); }
.box-khang-ghong-right { transform: rotateY(90deg) translateZ(220px);}
.box-khang-ghong-top { transform: rotateX(90deg) translateZ(93px) translateX(-10px); }

@keyframes rotation-3d {
  from {
    transform: translateZ(-100px) rotateY(0deg) rotateZ(30deg)}
  to {
    transform: translateZ(-100px) rotateY(360deg) rotateZ(30deg)}
}
  </style>
<body>
    <div class="box-amazon">
      <div class="box">
        <div class="box-side box-side-front"></div>
        <div class="box-side box-side-back"></div>
        <div class="box-left box-side-left"></div>
        <div class="box-right box-side-right"></div>
        <div class="box-side box-side-bottom"></div>
        <div class="box-side box-side-top"></div>
      </div>
    </div>
  </body>
</html>