3D cube CSS3

CSS3, HTMLView codeOriginal article
I was going to use this solution for my tetris 3D, but had to be abandoned because when 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. 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>
O0O0O0O0Commentator01.01.1970 03:00 (MSK)
There are no comments yet.. You can be the first..
Privacy policy (rus)
Enter your name
Enter your e-mail
Enter your message