.example
.block
.side.-main
.side.-left
.block
.side.-main
.side.-left
.block
.side.-main
.side.-left
View Compiled
html, body {
min-height: 100%;
}
body {
background: linear-gradient(125deg, #302015 0%, #1C1008 100%);
}
.example {
position: relative;
width: 80%;
padding-top: 50%;
margin: 2rem auto;
> .block {
position: absolute;
height: 100%;
width: 30%;
perspective: 1000px;
&:nth-of-type(1) {
height: 80%;
top: 10%;
left: 17%;
width: 15%;
}
&:nth-of-type(2) {
top: 0;
left: 35%;
}
&:nth-of-type(3) {
height: 80%;
top: 10%;
left: 64%;
width: 15%;
}
}
> .block > .side {
position: absolute;
top: 0;
left: 0;
background-image: url('https://picsum.photos/id/1025/1024/768');
background-size: auto 100%;
box-shadow: -1vw .5vw 1vw rgba(0, 0, 0, .3);
&.-main {
height: 100%;
width: 100%;
transform: rotateY(30deg);
transform-origin: 0 50%;
}
&.-left {
height: 100%;
width: 20%;
transform-origin: 0 50%;
transform: rotateY(-60deg) translateX(-100%);
filter: brightness(40%);
}
}
> .block:nth-of-type(1) > .side {
&.-main {
background-position: 4% 50%;
background-size: auto 130%;
}
&.-left {
background-position: 0 50%;
background-size: auto 130%;
}
}
> .block:nth-of-type(2) > .side {
&.-main {
background-position: 50% 0;
}
&.-left {
background-position: 28.5% 0;
}
}
> .block:nth-of-type(3) > .side {
&.-main {
background-position: 96% 50%;
background-size: auto 130%;
}
&.-left {
background-position: 78% 50%;
background-size: auto 130%;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.