Здесь показан анимированный трёхмерный куб, построенный с помощью CSS3. HTML-код и CSS-параметры для этого примера приведены ниже. Грани куба создаются с помощью шести блоковых тегов <sidepanel>, хотя можно было бы использоваать и обыкновенные <div>. Куб собирается из граней с помощью CSS-операций трансформации — перемещения (transform:translate()) и поворота (translate:rotate()). Здесь необходимо проявить пространственное мышление и обратить внимание на порядок применения операций.

Грани куба размещаются на сцене (<div class="stage">), которую позиционируют на странце и задают CSS-параметры perspective и perspective-origin, влияющие на проявление эффекта трёхмерности.

На гранях куба можно разместить различные элементы — картинки, тексты, ссылки и др. В данном примере большинство граней куба полупрозрачны (opacity < 1). На одной из них помещено изображение автомобиля, а на другой элементы <canvas>, содержимое которых управляется специальной функцией javascript orbita(). Внутри куба размещено изображение из анимационного gif-файла.

Анимация, состоящая во вращении куба вокруг вертикальной оси Y, проходящей через его центр, задаётся параметрами CSS @keyframes и animation.