[아임웹 코드] 주사위 돌듯 돌아가는 3D 슬라이드 애니메이션

시연 동영상 보기

<h1 class = "text-center">아임웹 주사위 슬라이드 애니메이션</h1>

<div id = "cube-container"> 

  <div class = "cube">    

    <img src = "https://cdn.imweb.me/upload/S20220110de20c90fdecb7/2b425bcd6eeae.png">

    <img src = "https://cdn.imweb.me/upload/S20220110de20c90fdecb7/08c741be731f3.png">

    <img src = "https://cdn.imweb.me/upload/S20220110de20c90fdecb7/879e1581f0049.png">

    <img src = "https://cdn.imweb.me/upload/S20220110de20c90fdecb7/c1363454a5463.png">    

  </div>    

</div>

<style>

  .text-center {

  margin-top: 56px;

  text-transform: uppercase;

  font-family: 'Open Sans', sans-serif;

}

#cube-container {

  width: 240px;

  height: 240px;

  margin: 80px auto;

  perspective: 800px;     

}

#cube-container:before {

  content: '';

  position: absolute; 

  top: 90px;

  left: 0;

  width: 100%; 

  height: 100%; 

  box-shadow: 0 0 75px 20px rgba(0, 0, 0, 0.1), inset 0 0 350px 350px rgba(0, 0, 0, 0.1); 

  transform: rotateX(95deg) translateZ(-80px) scale(1); 

  animation: rotateShadow 16s infinite; 

}

.cube { 

  height: 100%;

  width: 100%;

  position: relative;

  transform-style: preserve-3d;     

  transition: all 0.8s ease-in-out;   

  animation: rotate 16s infinite; 

}

.cube img {

  position: absolute;

  width: 240px;

  height: 240px;    

  backface-visibility: hidden;    

}

.cube img:nth-child(1) {

  transform: rotateY(0deg) translateZ(120px);

}

.cube img:nth-child(2) {

  transform: rotateY(90deg) translateZ(120px);

}

.cube img:nth-child(3) {

  transform: rotateY(-90deg) translateZ(120px);

}

.cube img:nth-child(4) {

  transform: rotateY(180deg) translateZ(120px);

}

@keyframes rotate {

  0% { transform: rotateY(0deg); }    

  25% { transform: rotateY(90deg); }    

  50% { transform: rotateY(180deg);}  

  75% {  transform: rotateY(270deg); }  

  100% { transform: rotateY(360deg); }

}

@keyframes rotateShadow {

  0% { transform:  rotateX(95deg) translateZ(-80px) scale(1) rotateZ(360deg); }   

  25% { transform:  rotateX(95deg) translateZ(-80px) scale(1) rotateZ(270deg); }    

  50% { transform:  rotateX(95deg) translateZ(-80px) scale(1) rotateZ(180deg);} 

  75% {  transform: rotateX(95deg) translateZ(-80px) scale(1)  rotateZ(90deg); }  

  100% { transform: rotateX(95deg) translateZ(-80px) scale(1)  rotateZ(0deg); }

}

</style>