MainGamesBlogContacts

RUEN
{{item}}
3D cube CSS3

01.07.2017
CSS3, HTMLView code

Original 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.
CSS3
.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>
Comments
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
Send
captcha