이 사이트는 곧 패쇄 예정입니다. 새로 작업한 사이트로 와주세요^^ http://wiss.tistory.com/

티스토리 뷰




이 애니메이션의 핵심은

/* animations */
@keyframes cube-view {
  20%, 90% { transform: rotateX(0deg) rotateY(0deg); }
  30%, 80% { transform: rotateX(45deg) rotateY(-45deg); }
}

@keyframes adjust-top {
  30%, 80% { left: 100%; transform: rotateZ(90deg) translateZ(0px); }
  40%, 70% { left: 0; transform: rotateZ(45deg) translateZ(50px); }
}

@keyframes adjust-bottom {
  30%, 80% { right: 100%; transform: rotateX(0deg) rotateZ(90deg) translateZ(0px); }
  40%, 70% { right: 0; transform: rotateX(180deg) rotateZ(45deg) translateZ(50px); }
}

@keyframes before {
  10%, 100% { width: 0px; }
  20%, 90% { width: 100px; }
  40%, 70% { transform: rotateY(0deg); }
  50%, 60% { transform: rotateY(-90deg); }
}

@keyframes after {
  10%, 100% { width: 0px; }
  20%, 90% { width: 100px; }
  40%, 70% { transform: rotateY(0deg); }
  50%, 60% { transform: rotateY(90deg); }
}



/* webkit animations */
@-webkit-keyframes cube-view {
  20%, 90% { -webkit-transform: rotateX(0deg) rotateY(0deg); }
  30%, 80% { -webkit-transform: rotateX(45deg) rotateY(-45deg); }
}

@-webkit-keyframes adjust-top {
  30%, 80% { left: 100%; -webkit-transform: rotateZ(90deg) translateZ(0px); }
  40%, 70% { left: 0; -webkit-transform: rotateZ(45deg) translateZ(50px); }
}

@-webkit-keyframes adjust-bottom {
  30%, 80% { right: 100%; -webkit-transform: rotateX(0deg) rotateZ(90deg) translateZ(0px); }
  40%, 70% { right: 0; -webkit-transform: rotateX(180deg) rotateZ(45deg) translateZ(50px); }
}

@-webkit-keyframes before {
  10%, 100% { width: 0px; }
  20%, 90% { width: 100px; }
  40%, 70% { -webkit-transform: rotateY(0deg); }
  50%, 60% { -webkit-transform: rotateY(-90deg); }
}

@-webkit-keyframes after {
  10%, 100% { width: 0px; }
  20%, 90% { width: 100px; }
  40%, 70% { -webkit-transform: rotateY(0deg); }
  50%, 60% { -webkit-transform: rotateY(90deg); }
}

keyframes의 모션이네요^^

대단하네요~ 미리보기 한번 보세요~~~



See the Pen How to build a cube by Jeff Ayer (@DeptofJeffAyer) on CodePen.









이 사이트는 곧 패쇄 예정입니다. 새로 작업한 사이트로 와주세요^^ http://wiss.tistory.com/
댓글
댓글쓰기 폼