cherry.png

3D cube CSS3

01.07.2017
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 {
    -webkit-perspective: 500px;
    perspective: 500px;
    -webkit-perspective-origin: center center;
    perspective-origin: center center;
    text-align: -webkit-center;
}

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

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

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

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

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

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

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

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

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotateY(360deg);
        transform: rotateY(360deg);
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotateY(360deg);
        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>


facebookvkontaktetwitterodnoklassnikimailrulivejournal

Comments

O0O0O0O0
Commentator
01.01.1970 00:00 (MSK)
There are no comments yet.. You can be the first..