Я хочу разделить фоновое изображение. Например - такой оригинальный образ.
И хочу получить такой эффект:
Мой код:
Но я не могу найти любой способ, как разделить этот background с эффектом 3D толщины, с помощью CSS или jQuery.
Источник: Split background image with 3D thickness effect
Ответ
Вот этот 3D-подход, чтобы нарезать изображение на 3 части и сделать эффект толщины.
Это является масштабируемой техникой и зависит от:
3D-преобразования для вращения изображения и эффекта толщины
техникой отступов - "padding technique" для сохранения пропорции
элементов
псевдо элементы, чтобы сделать толщину у каждой части изображения
background image and background-position
Демо: 3d вращение и толщина изображения.
body{perspective:1000px;}
.imgWrap{
position:relative;
width:90%;
margin:5% auto;
padding-bottom:39%;
transform: rotateY(25deg);
transform-style:preserve-3d;
}
.imgWrap > div{
position:absolute;
top:0;
width:30.3%;height:100%;
float:left;
background-image:url('http://i.imgur.com/FhZxJJp.jpg');
background-size:auto 100%;
transform-style:preserve-3d;
outline: 1px solid transparent; /* prevent jagged edges in firefox */
}
.imgWrap .left { left: 0; background-position: 3% 0; }
.imgWrap .center{ left:34.83%; background-position: -97% 0; }
.imgWrap .right { left:69.66%; background-position:-197% 0; }
.imgWrap > div:before{
content:'';
position:absolute;
top:0;right:100%;
width:10%; height:100%;
background:inherit;
transform-origin:100% 50%;
transform:rotateY(-90deg);
}
.imgWrap .left:before { background-position: 0% 0; }
.imgWrap .center:before{ background-position: -1001.3% 0; }
.imgWrap .right:before { background-position: -2001.4% 0; }
Обратите внимание, что вам нужно, чтобы добавить префиксы поставщиков для поддержки браузера. Дополнительные сведения см. в разделе canIuse.
Перевод ответа: Split background image with 3D thickness effect @web-tiki
Комментариев нет:
Отправить комментарий