BlogContacts
BlogGamesContacts

{{item}}

3D cube CSS3

01.07.2017

CSS3, HTML

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.
CSS
.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); }
}
HTML
<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>
    </div>
</div>
Privacy policy
Back to Top