Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
css cube
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment