Для товара, который продается на landing страничке можно сделать буклет или маркет кит, в развороте, который будет открываться при hover css наведении на изображение.
Разберем простой пример создания эффекта 3d разворота листа бумаги.
Добавим секцию, в которую поместим один див с классом pict.
Код в index.html.
|
1 2 3 |
<section id="wrap"> <div class="pict"></div> </section> |
Содержание статьи
Пропишем стили css hover эффекты в main.sass.
- У картинки делаем position: absolute.
- Задаем любые размеры полотна изображения.
- Добавим на фон background-image: url (.../img/11.png) изображение, которое предварительно подготовили под нужный размер.
- Делаем рамку для картинки сверху и снизу, потому что с двух сторон будут открываться продолжение буклета.
- Укажем изначальное положение transform: skewY (0deg) rotateY (0deg).
- При наведении 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
.pict top: 10% left: 30% transform: skewY(0deg) rotateY(0deg) position: absolute width: 120px height: 150px background-image: url("../img/11.png") background-size: cover background-position: center border-top: 5px solid #b641b0 border-bottom: 5px solid #b641b0 box-sizing: border-box transition: 1s &:hover transform: skewY(15deg) rotateY(5deg) &:before content: '' position: absolute width: 80% height: calc(100% + 10px) background-image: url("../img/12.png") background-size: cover background-position: center top: -5px left: -95px box-sizing: border-box transition: 1s border-top: 5px solid #b641b0 border-bottom: 5px solid #b641b0 border-left: 5px solid #b641b0 transform: perspective(1000px) skewY(-25deg) rotateY(-90deg) transform-origin: right box-shadow: inset -10px 0 10px rgba(0,0,0,.2) &:hover:before transform: perspective(1000px) skewY(-25deg) rotateY(0deg) &:after content: '' position: absolute width: 80% height: calc(100% + 10px) background-image: url("../img/13.png") background-size: cover background-position: center top: -5px right: -95px box-sizing: border-box transition: 1s border-top: 5px solid #b641b0 border-bottom: 5px solid #b641b0 border-right: 5px solid #b641b0 transform: perspective(1000px) skewY(-25deg) rotateY(-90deg) transform-origin: left box-shadow: inset 10px 0 10px rgba(0,0,0,.2) &:hover:after transform: perspective(1000px) skewY(-25deg) rotateY(0deg) |
Изометрические карты с css hover эффектом.
Устанавливаем любые размеры у карт.
Изображения можно использовать обложки журнала или прайс.
Код в index.html.
|
1 2 3 4 5 6 7 |
<section id="wrap"> <ul> <li><span>Обратная</span></li> <li><span>Обложка</span></li> <li><span>Портфолио</span></li> </ul> </section> |
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
ul position: absolute left: 40% top: 20% li top: -30px left: -20px display: block width: 100px height: 150px background: #f9f9f9 border: 3px solid #b641b0 position: absolute box-shadow: 10px 10px 20px rgba(0,0,0,.5) tranform-origin: botton center transform: rotate(10deg) skew(-30deg) transition: .5s span display: block color: blue font-size: 1em line-height: 150px text-align: center &:nth-child(1) transform: rotate(10deg) skew(-30deg) translate(10px,10px) &:nth-child(2) transform: rotate(10deg) skew(-30deg) translate(0px,0px) &:nth-child(3) transform: rotate(10deg) skew(-30deg) translate(-10px,-10px) &:hover li &:nth-child(1) transform: rotate(5deg) skew(0deg) translate(100px,0) &:nth-child(2) transform: rotate(0deg) skew(0deg) translate(0,0) &:nth-child(3) transform: rotate(-5deg) skew(0deg) translate(-100px,0) ul li:before content: '' position: absolute width: 50% height: 5px left: 0 bottom: 0 background-color: blue transition: .5s ul li:after content: '' position: absolute width: 50% height: 5px right: 0 bottom: 0 background-color: #b641b0 transition: .5s ul li:hover:before left: 50% ul li:hover:after right: 50% |