css cube
A Pen by Tony Brown on CodePen.
A Pen by Tony Brown on CodePen.
<div class="scene"> | |
<div class="floor"></div> | |
<div class="cube"> | |
<div class="front"></div> | |
<div class="back"></div> | |
<div class="left"></div> | |
<div class="right"></div> | |
<div class="top"> | |
<div class="ballShadow"></div> | |
</div> | |
<div class="bottom"></div> | |
</div> | |
<div class="ball"></div> | |
</div> |
:root { | |
--box-color: #0ff7; | |
--rotateSpeed: 30s; | |
--bounceSpeed: 1.3s; | |
} | |
body { | |
background-color: #080613; | |
min-height: 100vh; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
font-size: 75px; | |
perspective: 10em; | |
} | |
.scene { | |
position: relative; | |
transform-style: preserve-3d; | |
perspective-origin: 50% calc(50% - 2em); | |
animation: sceneRotate var(--rotateSpeed) infinite linear; | |
@keyframes sceneRotate { | |
to { | |
transform: rotateY(360deg); | |
} | |
} | |
} | |
.ball { | |
width: 1em; | |
height: 1em; | |
border-radius: 50%; | |
background-color: lightblue; | |
position: absolute; | |
left: -0.5em; | |
bottom: 1em; | |
background-image: radial-gradient(circle at top, lightblue, #000); | |
animation: ballBounce var(--bounceSpeed) infinite ease-out, | |
sceneRotate var(--rotateSpeed) infinite linear reverse; | |
@keyframes ballBounce { | |
0%, | |
100% { | |
bottom: 1em; | |
} | |
50% { | |
bottom: 3em; | |
animation-timing-function: ease-in; | |
} | |
} | |
@keyframes sceneRotate { | |
to { | |
transform: rotateY(360deg); | |
} | |
} | |
} | |
.ballShadow { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
background-image: radial-gradient(#0007, #0000 50%); | |
} | |
.cube { | |
width: 2em; | |
height: 2em; | |
transform-style: preserve-3d; | |
position: absolute; | |
top: -1em; | |
left: -1em; | |
perspective: 100em; | |
perspective-origin: 50% calc(50% - 2em); | |
.left, | |
.right, | |
.front, | |
.back { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
background: var(--box-color); | |
box-shadow: 0 0 0.5em #022d2d inset; | |
} | |
.front { | |
transform: translateZ(1em); | |
} | |
.right { | |
transform: rotateY(90deg) translateZ(1em); | |
} | |
.back { | |
transform: rotateY(180deg) translateZ(1em); | |
} | |
.left { | |
transform: rotateY(270deg) translateZ(1em); | |
} | |
.top { | |
position: absolute; | |
width: 2em; | |
height: 2em; | |
background: var(--box-color); | |
transform: translateY(-50%) rotateX(90deg); | |
box-shadow: 0 0 0.5em #022d2d inset; | |
} | |
.bottom { | |
position: absolute; | |
width: 2em; | |
height: 2em; | |
background: #0007; | |
bottom: 0; | |
transform: translateY(50%) rotateX(90deg); | |
box-shadow: 0 0 1em rgb(0, 0, 0); | |
} | |
} | |
.floor { | |
position: absolute; | |
top: 1em; | |
transform: translate(-50%, -50%) rotateX(90deg); | |
width: 25em; | |
height: 25em; | |
background-image: radial-gradient(#0000, #000 75%), | |
repeating-conic-gradient( | |
from 45deg, | |
hsl(272, 87%, 3%) 0deg 90deg, | |
hsl(273, 6%, 39%) 90deg 180deg | |
); | |
background-size: 100%, 1em 1em; | |
} |