С помощью 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
и т.д. Надеюсь вам понравился результат, если будет желание, то можете заказать себе такое же оформление блоков в сайдбар или любое другое место на сайте.

Подписка на обновления:
Вопрос по теме. А верстаешь руками или препроцессинг есть?
Добрый!
— руками.
Максим Рябухин, В принципе ты достиг результата в продвижении этого блога. Потребовалась кнопка Одноклассников, но не ко мне, а на другой проект. А так как с этой помойкой не часто приходилось работать, то быстро вбил в поиск «поделиться в одноклассники со своего сайта». Реферер Яндекс, но на нем случайно запрос сделал. У меня для тестов Опера стоит, а в ней по дефолту яндекс оказался. А там, как и ты, гугл!
Очень полезный пост! Я вот в css знаю многое, но до изучения 3D не дошел, а ведь очень классный эффект получился в сайдбаре!