ГлавнаяИгрыБлогКонтакты

RUEN
{{item}}
3D куб CSS3

01.07.2017
CSS3, HTMLСмотреть кодОригинальная статья
Это решение я сначала хотел использовать для своего тетриса 3D, но от него пришлось отказаться, т.к. при большом колличесве таких кубиков браузер начинает тормозить во-первых, а во-вторых кубики по краям поля смотрятся криво.Здесь главное то, что никакого JavaScript. Чистый CSS3 и 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>
Комментарии
O0O0O0O0Комментатор01.01.1970 03:00 (MSK)
Комментариев пока нет.. Вы можете стать первым..
Политика конфиденциальности
Введите ваше имя
Введите ваш e-mail
Введите ваше сообщение
Отправить
captcha