3d css

637

С помощью 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{
transformperspective(900px);
}

Свойство perspective

Одним из немаловажных свойств, а точнее самых главных, отвечающих за 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{
    transformrotate3d(0,1,0,90deg);
}
.grand1 .gran2{
    position: absolute;
    display: block;
}

Свойство rotate()

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(5 голосов, в среднем: 5 из 5)


не скупись ;-) ставь лайк
Подписка на обновления:
Автор блога Рябухин Максим

Я фрилансер веб-разработчик. Последние несколько лет занимаюсь версткой и веб-программированием на PHP и Javascript. Если вам понадобится помощь с блогом Wordpress, либо адаптация сайта, я всегда рад помочь.

связаться

Поддержи проект:

Вместе с этим советую почитать:

Оставьте комментарий

у меня есть сайт
;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

комментариев: 4
  • Виталий

    Вопрос по теме. А верстаешь руками или препроцессинг есть?

    Ответить
    • Максим Рябухин

      Добрый!
      - руками.

      Ответить
      • Виталий

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

        Ответить
  • Миша

    Очень полезный пост! Я вот в css знаю многое, но до изучения 3D не дошел, а ведь очень классный эффект получился в сайдбаре!

    Ответить
показать все


Как вам новый дизайн сайта?

Я рекомендую и вывожу деньги здесь: changemoney.me

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

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

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

Курс по соц. сетям