사용자:Wikiwater2020/rotatecube.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다. 구글 크롬, 파이어폭스, 마이크로소프트 엣지, 사파리: ⇧ Shift 키를 누른 채 "새로 고침" 버튼을 클릭하십시오. 더 자세한 정보를 보려면 위키백과:캐시 무시하기 항목을 참고하십시오.

section {
    width: 200px; height: 200px; position: relative; animation: rint 3s linear 0s infinite; transform-style: preserve-3d;
}

@keyframes rint {
    from {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

div {
width: 200px; height: 200px; position: absolute; left: 0; right: 0; opacity: 0.3
}

div:nth-child(1) { transform: rotateY(0deg) translate3d(0px, 0px, 100px); background: red; }
div:nth-child(2) { transform: rotateY(90deg) translate3d(0px, 0px, 100px); background: orange; }
div:nth-child(3) { transform: rotateY(180deg) translate3d(0px, 0px, 100px); background: yellow; }
div:nth-child(4) { transform: rotateY(270deg) translate3d(0px, 0px, 100px); background: green; }
div:nth-child(5) { transform: rotateX(90deg) translate3d(0px, 0px, 100px); background: blue; }
div:nth-child(6) { transform: rotateX(270deg) translate3d(0px, 0px, 100px); background: purple; }