3D куб с текстом с использованием только CSS

Иллюзия 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;
}


Готово!


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/p45jRYYtEs4/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

3D куб с текстом с использованием только CSS | | 2012-06-25 16:21:38 | | Статьи Web-мастеру | | Иллюзия 3D куба с текстом на гранях может быть создана с использованием современных техник CSS без использования JavaScript, изображений или SVG. Свойства трансформации для создания наклонов и | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: