3D cube CSS3



Source codeOriginal article
I was going to use this solution for my Tetris 3D, but had to be abandoned, because when there is a large number of such cubes, the browser slows down and the cubes on the edges of the field look crooked.Main feature is that there is no JavaScript - only pure CSS3 and HTML.
.container {
    perspective: 500px;
    perspective-origin: center center;
    text-align: -webkit-center;

.container_inner {
    width: 10em;
    height: 10em;
    border: 2px dotted white;
    transform-style: preserve-3d;
    animation: rotate 10s infinite linear;
    margin: auto;

.side {
    position: absolute;
    width: 10em;
    height: 10em;
    border: 1px solid white;
    opacity: 0.7;

.back {
    transform: translateZ(-5em);
    background: orange;

.front {
    transform: translateZ(5em);
    background: gold;

.top {
    transform: translateY(-5em) rotateX(90deg);
    background: skyblue;

.bottom {
    transform: translateY(5em) rotateX(90deg);
    background: steelblue;

.left {
    transform: translateX(-5em) rotateY(90deg);
    background: lightgreen;

.right {
    transform: translateX(5em) rotateY(90deg);
    background: yellowgreen;

@keyframes rotate {
    100% { transform: rotateY(360deg); }
<div class="container">
    <div class="container_inner">
        <div class="back side"></div>
        <div class="left side"></div>
        <div class="right side"></div>
        <div class="top side"></div>
        <div class="bottom side"></div>
        <div class="front side"></div>
Privacy policy
Back to Top