[CSS] 움직이는 육면체 애니메이션🎲

움직이는 육면체 애니메이션🎲

이번 포스팅에서는 움직이는 육면체 애니메이션을 만들어보도록 하겠습니다!

HTML 코드

cube클래스를 가진 div 태그 안에 div 박스를 6개 만들고 첫번째 div 박스에 글자를 넣습니다.

<div class="cube">
  <div>코딩공책</div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS 코드

body {
	background-color: #999;
	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);}
}

결과물

이렇게 육면체가 끊임없이 회전하면서 세로로 늘어났다 줄어났다를 반복하는 애니메이션이 완성되었습니다.