CSS 애니메이션 : 넘어가는 사진 3D 효과

애니메이션 만들기

css 애니메이션을 만들어 봅니다!

애니메이션 : 쭉쭉 늘어나는 큐브

큐브에 글씨가 있으며, 빙글빙글 돌아가며 쭉쭉 늘어나는 애니메이션입니다.

html 코드 보기

<div class="cube">
  <div>코</div>
  <div>딩</div>
  <div>척</div>
  <div>척</div>
  <div>학</div>
  <div>사</div>
</div>

css 코드 보기

body {
  background: #0fa599;
  height: 100vh;
  perspective: 1000px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cube {
  position: relative;
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transform:
    rotatex(-20deg)
    rotatey(-140deg)
    translatez(0);
  animation: rotate 8000ms linear infinite;
}
.cube div {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  opacity: 0.75;
  color: #fff;
}
.cube div:nth-child(1){
  background-color: #ffcc80;
  transform-origin: center top;
  transform: rotatex(90deg) translatey(-100px);
  animation: top 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(2){
  background-color: #ffb74d;
  transform-origin: center bottom;
  transform: rotatex(-90deg) translatey(100px);
  animation: bottom 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(3){
  background-color: #ffa726;
  transform-origin: left center;
  transform: rotatey(-90deg) translatex(-100px);
  animation: left 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(4){
  background-color: #ff9800;
  transform-origin: right center;
  transform: rotatey(90deg) translatex(100px);
  animation: right 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(5){
  background-color: #fb8c00;
  transform-origin: center center;
  transform: rotatex(0deg);
  animation: front 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(6){
  background-color: #ffb74d;
  transform-origin: center center;
  transform: rotatey(180deg) translatez(100px);
  animation: back 4000ms ease-in-out 8000ms infinite;
}

@keyframes rotate {
  0% {transform: rotatex(0) rotatey(0) rotatez(0) translatez(0);}
  100% {transform: rotatex(360deg) rotatey(360deg) rotatez(360deg) translatez(0);}
}
@keyframes top {
  0% {transform: rotatex(90deg) translatey(-100px) translatez(0);}
  50% {transform: rotatex(90deg) translatey(-100px) translatez(100px);}
  100% {transform: translatex(90deg) translatey(-100px) translatez(0);}
}
@keyframes bottom {
  0% {transform: rotatex(-90deg) translatey(100px) translatez(0);}
  50% {transform: rotatex(-90deg) translatey(100px) translatez(100px);}
  100% {transform: rotatex(-90deg) translatey(100px) translatez(0);}
}
@keyframes left {
  0% {transform: rotatey(-90deg) translatex(-100px) scaley(1);}
  50% {transform: rotatey(-90deg) translatex(-100px) scaley(3);}
  100% {transform: rotatey(-90deg) translatex(-100px) scaley(1);}
}
@keyframes right {
  0% {transform: rotatey(90deg) translatex(100px) scaley(1);}
  50% {transform: rotatey(90deg) translatex(100px) scaley(3);}
  100% {transform: rotatey(90deg) translatex(100px) scaley(1);}
}
@keyframes front {
  0% {transform: rotatex(0deg)scaley(1);}
  50% {transform: rotatex(0deg)scaley(3);}
  100% {transform: rotatex(0deg)scaley(1);}
}
@keyframes back {
  0% {transform: rotatex(180deg) translatez(100px) scaley(1);}
  50% {transform: rotatex(180deg) translatez(100px) scaley(3);}
  100% {transform: rotatex(180deg) translatez(100px) scaley(1);}
}

See the Pen 쭉쭉 늘어나는 큐브 by hjkang306 (@hjkang306) on CodePen.