Октябрь 2017
Автор: Рубрика: Верстка Один комментарий

Эффект 3d разворота евро буклета и изометрические карты


Эффект 3d разворота евро буклета

Для товара, который продается на landing страничке можно сделать буклет или маркет кит, в развороте, который будет открываться при hover css наведении на изображение.

Разберем простой пример создания эффекта 3d разворота листа бумаги.

Эффект переворота листа.

Добавим секцию, в которую поместим один див с классом pict.

Код в index.html.

Пропишем стили css hover эффекты в main.sass.

  1. У картинки делаем position: absolute.
  2. Задаем любые размеры полотна изображения.
  3. Добавим на фон background-image: url (.../img/11.png) изображение, которое предварительно подготовили под нужный размер.
  4. Делаем рамку для картинки сверху и снизу, потому что с двух сторон будут открываться продолжение буклета.
  5. Укажем изначальное положение transform: skewY (0deg) rotateY (0deg).
  6. При наведении css hover будем поворачивать картинку относительно оси transform: skewY (15deg) rotateY (5deg).

Добавим два класса &:before и &:after для разворотов с двух сторон.

Все свойства для &:before.

  • Ширина будет меньше width: 80%, а высоту подбираем относительно размера height: calc (100% + 10px).
  • Изображение при развороте будет background-image: url (.../img/12.png). Добавим нужное изображение в папку img.
  • Бордюр будет сверху снизу и слева, как одно целое после разворота.
  • Добавим искажений transform: perspective (1000px) skewY (-25deg) rotateY (-90deg) для эффекта при наведении.
  • Добавим точку относительно, которой будет происходить разворот transform-origin: right.
  • Тень будет внутри разворота box-shadow: inset -10px 0 10px rgba (0,0,0,.2).
  • Что произойдет, в элементом before, когда наведем мышкой &:hover:before он трансформируется с таким положением и координатами transform: perspective (1000px) skewY (-25deg) rotateY (0deg).

Укажем свойства для &:after.

  • Копируем все свойства сверху, меняем картинку и там где было right меняем на left.

Код в main.sass.

Изометрические карты с css hover эффектом.

Эффект разворота изометрические карты

Устанавливаем любые размеры у карт.

Изображения можно использовать обложки журнала или прайс.

Код в index.html.

Код в main.sass.

Один комментарий
  • mastweb

    орпо

    2017-10-21 в 7:12 | Ответить