3d css

С помощью CSS стилей можно добиться фантастических результатов и я больше чем уверен, что многие новички даже не подозревают об этих возможностях. Поэтому сегодня я хотел бы затронуть тему 3d css трансформации на рабочем примере, который у меня фигурирует в правом сайдбаре сайта.

Курс Бери и Зарабатывай!

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

Узнать больше!

HTML

Для начала нам понадобится каркас, он здесь совсем небольшой, потому как основной вес приходится на стили. Поэтому создаем блоки DIV, которые будут отвечать за 2 грани визуального куба, и обертываем их еще несколькими блоками для удобства стилизации.

<div class="blok-main">
<div class="gran1"></div>
<div class="gran2"></div>
</div>

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

CSS

Это основная часть работы, поэтому здесь мы поговорим о каждом свойстве в отдельности, которое позволяет нам создавать 3d перспективу для элементов. Первым для обсуждения возьмем свойство perspective. Оно отвечает за глубину элемента, которая визуально будет отражаться по оси Z. Задавать его можно в значении свойства transform. Пример можете увидеть ниже:

.blok-main{
transform: perspective(900px);
}

Одним из немаловажных свойств, а точнее самых главных, отвечающих за 3d трансформацию является transform-style. Отображение элемента будет зависеть только от его значения и для нашего случая мы должны указать preserve-3d.

Чтобы задать точку координат для трансформации, нам понадобится подкорректировать свойство transform-origin. По умолчанию его значение:

 transform-0rigin: 50% 50%; 

Для того, чтобы повернуть наш элемент нам понадобится теперь задать следующее:

transform: perspective(700px) rotate3d(0,1,0,-80deg);

Для тех, кто не знает, свойство rotateY() задает поворот указанному элементу по оси Y. В данном случае мы использовали вариант затрагивающий сразу 3 оси координат — X,Y,Z.

Ну и конечно же не забываем о второй грани, которая и должна отвечать за визуальный вид куба. Для этого достаточно будет задать блокам граней абсолютное позиционирование, чтобы они лежали друг на друге, а дальше задаем второй грани поворот по оси Y. Выглядит это примерно так:

.gran2{
    transform: rotate3d(0,1,0,90deg);
}
.grand1 .gran2{
    position: absolute;
    display: block;
}

Дальше уже можно задать тень через box-shadow, ширину и высоту через width и height и т.д. Надеюсь вам понравился результат, если будет желание, то можете заказать себе такое же оформление блоков в сайдбар или любое другое место на сайте.

не скупись оцени статью