Иллюзия 3D куба с текстом на гранях может быть создана с использованием современных техник CSS без использования JavaScript, изображений или SVG. Свойства трансформации для создания наклонов и вращений прямоугольников с тенями можно скомбинировать для формирования куба.

Как это устроено

Разметка HTML очень проста. Каждая грань имеет свой собственный элемент div, класс и содержание. Верхняя грань требует дополнительной разметки для обеспечения соответствующей трансформации.

<div class="cube">
        <div class="topFace">
                <div>
                        Содержание
                </div>
        </div>
        <div class="leftFace">
                Содержание
        </div>
        <div class="rightFace">
                Содержание
        </div>
</div>

В нашем примере геометрия куба будет немного грубоватой и неточной, но, в целом, он будет похож на самый настоящий куб.

Каждый из прямоугольников будет иметь слегка отличающийся оттенок серого для создания иллюзии глубины изображения. В примере левая грань находится в тени. Каждая грань позиционируется абсолютно по отношению к контейнеру cube. Размер граней - 200 x 200 px, включая 10 px на отступы.

.cube {
        position: relative;
        top: 200px;
}
 
.rightFace,
.leftFace,
.topFace div {
        padding: 10px;
        width: 180px;
        height: 180px;
}
 
.rightFace,
.leftFace,
.topFace {
        position: absolute;
}

Теперь немного геометрии. Левую и правую грани отклоним на ±30? от вертикальной оси, а правую грань дополнительно сдвинем на 200px, накладывая два ребра для создания угла, выравненного по центру.

.leftFace {
        -webkit-transform: skewY(30deg);
        -moz-transform: skewY(30deg);
        background-color: #ccc;
}
 
.rightFace {
        -webkit-transform: skewY(-30deg);
        -moz-transform: skewY(-30deg);
        background-color: #ddd;
        left: 200px;
}

Верхняя грань создается несколько сложнее: ее надо наклонить, масштабировать, повернуть и позиционировать. Наклон выполняется на –30? от вертикальной оси, а получившийся угол должен быть повернут по часовой стрелке на 60?. Поворот угла приводит к изменению ориентации содержания.

Мы используем простой способ для создания верхней грани без использования математики и в результате получаем форму бриллианта. Теперь надо позиционировать и масштабировать заполнение формы верхней грани. Для использованных углов коэффициент масштабирования по направлению оси Y составляет 1.16. Размер шрифта нужно уменьшить на тотже коэффициент.

.topFace div {
        -webkit-transform: skewY(-30deg) scaleY(1.16);
        -moz-transform: skewY(-30deg) scaleY(1.16);
        background-color: #eee;
        font-size: 0.862em;
}
 
.topFace {
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        top: -158px;
        left: 100px;
}

Окончательный вид CSS кода будет таким:

.cube {
        position: relative;
        top: 200px;
}
 
.rightFace,
.leftFace,
.topFace div {
        padding: 10px;
        width: 180px;
        height: 180px;
}
 
.rightFace,
.leftFace,
.topFace {
        position: absolute;
}
 
.leftFace {
        -webkit-transform: skewY(30deg);
        -moz-transform: skewY(30deg);
        background-color: #ccc;
}
 
.rightFace {
        -webkit-transform: skewY(-30deg);
        -moz-transform: skewY(-30deg);
        background-color: #ddd;
        left: 200px;
}
 
.topFace div {
        -webkit-transform: skewY(-30deg) scaleY(1.16);
        -moz-transform: skewY(-30deg) scaleY(1.16);
        background-color: #eee;
        font-size: 0.862em;
}
 
.topFace {
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        top: -158px;
        left: 100px;
}

Готово!

Добавлено: 07 Апреля 2018 13:49:18 Добавил: Андрей Ковальчук Нравится 0

Добавить