728x90
애니메이션06
오늘은 아래와 같이 상자가 돌아가는 애니메이션을 만들어 보았습니다.
HTML
큰 div태그에 class="cube"를 입력합니다. cube 안에 div박스 6개를 만들어줍니다.
<div class="cube">
<div>가나다라</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
CSS
애니메이션을 위한 css입니다.
body {
background-color: #FBD786;
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: #000;
}
.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: 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);}
}
728x90
반응형
'CSS' 카테고리의 다른 글
| [CSS]애니메이션08 (6) | 2022.09.26 |
|---|---|
| [CSS]애니메이션07 (1) | 2022.09.25 |
| [CSS]애니메이션05 (2) | 2022.09.21 |
| [CSS]MouseHoverEffect01 (3) | 2022.09.20 |
| [CSS]애니메이션04 (3) | 2022.09.19 |
댓글