CSS - 움직이는 육면체

움직이는 육면체

나도 이게 뭔지 몰라요.....;;;

---

CSS

body {
    background-color: #FFB3B3;
    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: #FF7F3F;
    }
    .cube div:nth-child(1) {
    background-color: #C3F8FF;
    transform-origin: center top;
    transform: rotatex(90deg) translatey(-100px);
    animation: top 4000ms ease-in-out 8000ms infinite;
    }
    .cube div:nth-child(2) {
    background-color: #A5F1E9;
    transform-origin: center bottom;
    transform: rotatex(-90deg) translatey(100px);
    animation: bottom 4000ms ease-in-out 8000ms infinite;
    }
    .cube div:nth-child(3) {
    background-color: #DFF6FF;
    transform-origin: left center;
    transform: rotatey(-90deg) translatex(-100px);
    animation: left 4000ms ease-in-out 8000ms infinite;
    }
    .cube div:nth-child(4) {
    background-color: #C1EFFF;
    transform-origin: right center;
    transform: rotatey(90deg) translatex(100px);
    animation: right 4000ms ease-in-out 8000ms infinite;
    }
    .cube div:nth-child(5) {
    background-color: #B1E1FF;
    transform-origin: center center;
    transform: rotatex(0deg);
    animation: front 4000ms ease-in-out 8000ms infinite;
    }
    .cube div:nth-child(6) {
    background-color: #D6EFED;
    transform-origin: center center;
    transform: rotatey(180deg) translatez(100px);
    animation: back 4000ms ease-in-out 8000ms infinite;
    }
    @keyframes rotate {
    0% {transform: rotatex(0deg) rotatey(0deg) rotatez(0deg) translatez(0deg);}
    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);}
    }

결과

---

코드팬 보기