← All elements
<div class="square">
<div class="side side-1"></div>
<div class="side side-2"></div>
<div class="side side-3"></div>
<div class="side side-4">
<div class="shadow"></div>
</div>
<div class="side side-5"></div>
<div class="side side-6"></div>
</div>
<div class="ball"></div>About this animation
A translucent blue cube drawn in 3D that slowly rotates while a ball bounces inside it.
How it works
Six translucent blue faces are rotated into a cube with transform-style preserve-3d. The cube rotates around the Y axis while a ball and its shadow run a bounce keyframe inside it, so the ball seems to hit the floor of the box each time.
Ways to customise it
- Change the rgba blue values of the faces.
- Edit the 150px size of the cube.
- Change the rotate and bounce durations.
Good to know
3D transforms are hardware accelerated in current browsers. It is purely decorative, so keep any meaning outside of it.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.