* {
box-sizing: border-box;
padding: 0;
margin: 0;
transform-style: preserve-3d;
}
body {
overflow: hidden;
width: 100vw;
height: 100vh;
background: rgba( 0, 0, 0, 0.75 );
}
.origin {
width: 0;
height: 0;
position: absolute;
left: 50%;
top: 50%;
animation: rotateP 20s infinite linear;
}
.circle {
width: 128px;
height: 128px;
position: absolute;
left: 50%;
top: 50%;
border-radius: 100%;
box-shadow: 0 0 60px 2px limegreen;
}
.circleX {
transform: translate3d( -50%, -50%, 0 ) rotate3d( 1, 0, 0, 90deg );
}
.circleY {
transform: translate3d( -50%, -50%, 0 ) rotate3d( 0, 1, 0, 90deg );
}
.circleZ {
transform: translate3d( -50%, -50%, 0 ) rotate3d( 0, 0, 1, 90deg );
}
.plate {
width: 32px;
height: 32px;
position: absolute;
left: 50%;
top: 50%;
}
.plate.front {
transform: translate3d( -50%, -50%, 128px );
}
.plate.right {
transform: translate3d( calc( -50% + 128px ), -50%, 0 );
}
.plate.left {
transform: translate3d( calc( -50% - 128px ), -50%, 0 );
}
.plate.back {
transform: translate3d( -50%, -50%, -128px );
}
.plate.top {
transform: translate3d( -50%, calc( -50% - 128px ), 0 );
}
.plate.bottom {
transform: translate3d( -50%, calc( -50% + 128px ), 0 );
}
.letterBox {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d( -50%, -50%, 0 );
background: whitesmoke;
animation: rotateM 20s infinite linear;
}
@keyframes rotateP {
0% {
transform: rotate3d( 1, 1, 1, 0deg );
}
100% {
transform: rotate3d( 1, 1, 1, 360deg );
}
}
@keyframes rotateM {
0% {
transform: rotate3d( -1, -1, -1, 0deg );
}
100% {
transform: rotate3d( -1, -1, -1, 360deg );
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="rotate.css">
</head>
<body>
<div style="width: 0; height: 0; border: solid green 1px; position: absolute; left: 50%; top: 50%; transform: translate( -50%, -50% );"></div>
<div class="origin">
<div class="circle circleX"></div>
<div class="circle circleY"></div>
<div class="circle circleZ"></div>
<div class="plate front">
<div class="letterBox">Front</div>
</div>
<div class="plate right">
<div class="letterBox">Right</div>
</div>
<div class="plate left">
<div class="letterBox">Left</div>
</div>
<div class="plate back">
<div class="letterBox">Back</div>
</div>
<div class="plate top">
<div class="letterBox">Top</div>
</div>
<div class="plate bottom">
<div class="letterBox">Bottom</div>
</div>
</div>
</body>
</html>