<div id="scene">
<div class="camera-arm z">
<div class="camera-arm x">
<div class="camera-arm y">
<div id="world">
<div class="box">
<div class="face top"></div>
<div class="face left"></div>
<div class="face front"></div>
<div class="face right"></div>
<div class="face back"></div>
<div class="face bottom"></div>
</div>
</div>
</div>
</div>
</div>
</div>
:root {
--camera-full-cycle-duration: 10s;
}
html, body, #scene, .camera-arm, #world {
height: 100%;
width: 100%;
}
#scene {
perspective: 500px;
}
.camera-arm {
transform-style: preserve-3d;
}
.camera-arm.z {
animation: camera-arm-z-zoom var(--camera-full-cycle-duration) infinite;
}
@keyframes camera-arm-z-zoom {
0% {
transform: translateZ(0);
}
50% {
transform: translateZ(250px);
}
100% {
transform: translateZ(0);
}
}
.camera-arm.y {
animation: camera-arm-y-rotation var(--camera-full-cycle-duration) linear infinite;
}
@keyframes camera-arm-y-rotation {
0% {
transform: rotateY(-45deg);
}
50% {
transform: rotateY(135deg);
}
100% {
transform: rotateY(315deg);
}
}
.camera-arm.x {
animation: camera-arm-x-rotation var(--camera-full-cycle-duration) infinite;
}
@keyframes camera-arm-x-rotation {
0% {
transform: rotateX(-45deg);
}
50% {
transform: rotateX(-25deg);
}
100% {
transform: rotateX(-45deg);
}
}
#world {
position: absolute;
top: 50%;
left: 50%;
transform-style: preserve-3d;
}
#world * {
transform-style: preserve-3d;
}
.face {
position: absolute;
top: -50px;
left: -50px;
height: 100px;
width: 100px;
background-color: red;
border: 1px solid black;
transform-style: preserve-3d;
}
.face.top {
transform: translateY(-50px) rotateX(90deg);
}
.face.left {
transform: translateX(-50px) rotateY(-90deg);
}
.face.front {
transform: translateZ(-50px) rotateY(180deg);
}
.face.right {
transform: translateX(50px) rotateY(90deg);
}
.face.back {
transform: translateZ(50px);
}
.face.bottom {
transform: translateY(50px) rotateX(-90deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.