cherry.png

3D куб CSS3

01.07.2017
Это решение я сначала хотел использовать для своего тетриса 3D, но от него пришлось отказаться, т.к. при большом колличесве таких кубиков браузер начинает тормозить во-первых, а во-вторых кубики по краям поля смотрятся криво.
Здесь главное то, что никакого JavaScript. Чистый CSS3 и 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

Комментарии

O0O0O0O0
Комментатор
01.01.1970 00:00 (MSK)
Комментариев пока нет.. Вы можете стать первым..