jquery - poner - Imagen de fondo dividida con efecto de espesor 3D

efecto scroll con imagen de fondo

Question

Quiero dividir la imagen de fondo. Por ejemplo, imagen original como esta.

Y quiero un efecto como este:

Este es mi codigo

<style>
div{
-webkit-transform: skewY(175deg);
padding: 10px;
margin: 10px;
border: 10px;
background-image: url(Chrysanthemum.jpg);
width: 200px;
height: 200px;
background-origin: content-box;
}
</style>
<div></div>

Pero no puedo encontrar la manera de dividir este fondo con el mismo efecto de grosor con CSS o jQuery.

Answer 1

Aquí hay otra solución donde confío en un elemento .

La idea es usar un fondo múltiple para crear diferentes capas sobre la imagen inicial con el fin de:

• Cree el espacio entre cada parte de la imagen utilizando un color blanco (o el mismo color que el fondo principal).
• Crea la sombra para cada parte.
• Crea el efecto de grosor utilizando un color transparente.

Luego hacemos una rotación con perspectiva para tener la ilusión 3D.

body {
perspective: 1000px;
}
.box {
margin: 20px;
width:400px;
height:200px;
transform: rotateY(25deg);
transform-style: preserve-3d;
background:
/* */
linear-gradient(to top right,transparent 55%,#aaa 60%) 0px 100%/22px 16px no-repeat,
linear-gradient(to bottom left,transparent 50%,#fff 52%) 22px 100%/10px 3px no-repeat,
linear-gradient(to top left,transparent 50%,#fff 52%) 22px 0px/10px 3px no-repeat,
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) 22px 0px/10px 100% no-repeat,
linear-gradient(#fff,#fff) 0px 0px/22px 100% no-repeat,
/* */
linear-gradient(30deg,transparent 35%,#aaa 51%) 130px 100%/10px 16px no-repeat,
linear-gradient(to bottom left,transparent 50%,#fff 52%) 140px 100%/8px 3px no-repeat,
linear-gradient(to top left,transparent 50%,#fff 52%) 140px 0px/8px 3px no-repeat,
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) 140px 0px/8px 100% no-repeat,
linear-gradient(#fff,#fff) 130px 0px/10px 100% no-repeat,
/* */
linear-gradient(30deg,transparent 35%,#aaa 51%) 260px 100%/10px 16px no-repeat,
linear-gradient(to bottom left,transparent 50%,#fff 52%) 270px 100%/8px 3px no-repeat,
linear-gradient(to top left,transparent 50%,#fff 52%) 270px 0px/8px 3px no-repeat,
linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)) 270px 0px/8px 100% no-repeat,
linear-gradient(#fff,#fff) 260px 0px/10px 100% no-repeat,
url(https://picsum.photos/400/200/?image=1015) 0 0/cover no-repeat;
}

<div class="box" >
</div>

Answer 2

Aquí hay un enfoque 3D para cortar la imagen en 3 partes y hacer el efecto de grosor. Es sensible y se basa en:

• Transformaciones 3d para la rotación de la imagen y el efecto de espesor.
• La "técnica de relleno" para mantener la relación de aspecto de los elementos.
• Pseudo elementos para hacer el thikness de cada parte de la imagen.
• imagen de fondo y posición de fondo

Demostración de una imagen 3d girada y gruesa .

Salida:

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; }

<div class="imgWrap">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>

Tenga en cuenta que deberá agregar prefijos de proveedores para la compatibilidad con el navegador. Para más información, ver canIuse .

Answer 3

Esta respuesta proporciona solo soluciones de un solo elemento.

Una solución 2D sería usar solo los pseudo elementos :before y :after para imitar las brechas. Solo necesita colocarlos y darles la distancia adecuada al borde con calc() .

Para hacer que se vea más en 3D, puedes usar la perspective() transform perspective() en combinación con rotateY() lugar de skewY() :

div {
position: relative;
-webkit-transform: perspective(1000px) rotateY(30deg);
transform: perspective(1000px) rotateY(30deg);
margin: 50px 10px;
background-image: url(http://placekitten.com/g/600/200);
width: 600px;
height: 200px;
}
div:before,
div:after {
content: "";
position: absolute;
top: 0;
width: 10px;
height: 100%;
background: white;
}
div:before {
left: calc(33% - 5px);
}
div:after {
right: calc(33% - 5px);
}

<div></div>

Para lograr un efecto 3D muy simple, puede agregar un border-left al div y un border-right a los pseudo elementos. Además de aplicar un borde superior e inferior blanco y hacer que el borde derecho sea semitransparente, los pseudo elementos incluso dan una sensación de 3D. Lamentablemente eso no es posible con el elemento principal. Pero aquí puedes al menos jugar con la transparencia de la frontera.

div {
position: relative;
-webkit-transform: perspective(1000px) rotateY(30deg);
transform: perspective(1000px) rotateY(30deg);
margin: 50px 10px;
background-image: url(http://placekitten.com/g/600/200);
width: 600px;
height: 200px;
background-origin: border-box;
border-left: 5px solid rgba(0, 0, 0, 0.5);
}
div:before,
div:after {
content: "";
position: absolute;
top: 0;
width: 0;
height: 100%;
box-sizing: border-box;
background: transparent;
border-top: 4px solid white;
border-bottom: 4px solid white;
border-left: 10px solid white;
border-right: 6px solid rgba(0, 0, 0, 0.5);
}
div:before {
left: calc(33% - 7px);
}
div:after {
right: calc(33% - 7px);
}

<div></div>