본문 바로가기

TUTORIAL


CSS Animation

CSS Animation - Cube Animation

CSS Animation 튜토리얼입니다. CSS3를 이용한 애니메이션과 사이트에 필요한 모션에 대해서 배우는 튜토리얼입니다.
오늘 배울 애니메이션 완성작입니다.
완성 샘플 : Cube Animation GO


사용프로그램
codepen GO


CSS Reference GO

CSS Animation GO

Codepen Webstoryboy GO

인스타그램 보기 GO

포폴 만들기 스터디 모임 GO

웹 퍼블리셔가 되기 위한 튜토리얼 순서
1. 웹 표준 사이트 만들기(2019) GO
2. 반응형 사이트 만들기(2019) GO
3. 메가박스 사이트 만들기(2019) - 디자인 GO
4. 메가박스 사이트 만들기(2019) - 코딩 GO
...추후 제공

+ 웹디자인 기능사 GO
+ CSS Animation GO
+ Parallax GO
+ Image Slider GO

기본 애니메이션
Bar Animation GO
Dot Animation GO
Wave Animation GO
Cube Animation GO
Tail Animation GO

<div class="cube">
    <div>webs</div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>











 













































body {
    background-color: #ffebee;
    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: #ffcc80;
    transform: rotatex(90deg) translatey(-100px);
    transform-origin: center top;
    animation: top 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(2){
    background: #ffb74d;    
    transform-origin: center bottom;
    transform: rotatex(-90deg) translatey(100px);
    animation: bottom 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(3){
    background: #ffa726;
    transform-origin: left center;
    transform: rotateY(-90deg) translateX(-100px);
    animation: left 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(4){
    background: #ff9800;
    transform-origin: right center;
    transform: rotateY(90deg) translateX(100px);
    animation: right 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(5){
    background: #fb8c00;
    transform-origin: center center;
    transform: rotateX(0deg);
    animation: front 4000ms ease-in-out 8000ms infinite;
}
.cube div:nth-child(6){
    background: #f57c00;
    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: rotatex(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: rotateY(180deg) translatez(100px) scaleY(1);}
    50%  {transform: rotateY(180deg) translatez(100px) scaleY(3);}
    100% {transform: rotateY(180deg) translatez(100px) scaleY(1);}
}