Модальная картина на CSS

Пример:

HTML:

<div class="modalpic">
	<div class="picblock">
		<div class="side picmain"></div>
		<div class="side picleft"></div>
	</div>
	<div class="picblock">
		<div class="side picmain"></div>
		<div class="side picleft"></div>
	</div>
	<div class="picblock">
		<div class="side picmain"></div>
		<div class="side picleft"></div>
	</div>
</div>

</div>

</div>

</div>

CSS:

.modalpic {
	position: relative;
	width: 100%;
	padding-top: 50%;
	margin: 20px auto;
}
.modalpic > .picblock {
	position: absolute;
	height: 100%;
	width: 30%;
	perspective: 1400px;
}
.modalpic > .picblock:nth-of-type(1) {
	height: 80%;
	top: 10%;
	left: 20%;
	width: 15%;
}
.modalpic > .picblock:nth-of-type(2) {
	top: 0;
	left: 38%;
}
.modalpic > .picblock:nth-of-type(3) {
	height: 80%;
	top: 10%;
	left: 67%;
	width: 15%;
}
.modalpic > .picblock > .side {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('photo.jpg'); /* Ссылка на фото */
	background-size: auto 100%;
	box-shadow: -1vw 0.5vw 1vw rgba(0, 0, 0, 0.3);
}
.modalpic > .picblock > .side.picmain {
	height: 100%;
	width: 100%;
	transform: rotateY(26deg);
	transform-origin: 0 50%;
}
.modalpic > .picblock > .side.picleft {
	height: 100%;
	width: 20%;
	transform-origin: 0 50%;
	transform: rotateY(-60deg) translateX(-100%);
	filter: brightness(40%);
}
.modalpic > .picblock:nth-of-type(1) > .side.picmain {
	background-position: 4% 50%;
	background-size: auto 130%;
}
.modalpic > .picblock:nth-of-type(1) > .side.picleft {
	background-position: 0 50%;
	background-size: auto 130%;
}
.modalpic > .picblock:nth-of-type(2) > .side.picmain {
	background-position: 50% 0;
}
.modalpic > .picblock:nth-of-type(2) > .side.picleft {
	background-position: 28.5% 0;
}
.modalpic > .picblock:nth-of-type(3) > .side.picmain {
	background-position: 96% 50%;
	background-size: auto 130%;
}
.modalpic > .picblock:nth-of-type(3) > .side.picleft {
	background-position: 78% 50%;
	background-size: auto 130%;
}

.modalpic {

position: relative;

width: 100%;

padding-top: 50%;

margin: 20px auto;

}

.modalpic > .picblock {

position: absolute;

height: 100%;

width: 30%;

perspective: 1400px;

}

.modalpic > .picblock:nth-of-type(1) {

height: 80%;

top: 10%;

left: 20%;

width: 15%;

}

.modalpic > .picblock:nth-of-type(2) {

top: 0;

left: 38%;

}

.modalpic > .picblock:nth-of-type(3) {

height: 80%;

top: 10%;

left: 67%;

width: 15%;

}

.modalpic > .picblock > .side {

position: absolute;

top: 0;

left: 0;

background-image: url('photo.jpg'); /* Ссылка на фото */

background-size: auto 100%;

box-shadow: -1vw 0.5vw 1vw rgba(0, 0, 0, 0.3);

}

.modalpic > .picblock > .side.picmain {

height: 100%;

width: 100%;

transform: rotateY(26deg);

transform-origin: 0 50%;

}

.modalpic > .picblock > .side.picleft {

height: 100%;

width: 20%;

transform-origin: 0 50%;

transform: rotateY(-60deg) translateX(-100%);

filter: brightness(40%);

}

.modalpic > .picblock:nth-of-type(1) > .side.picmain {

background-position: 4% 50%;

background-size: auto 130%;

}

.modalpic > .picblock:nth-of-type(1) > .side.picleft {

background-position: 0 50%;

background-size: auto 130%;

}

.modalpic > .picblock:nth-of-type(2) > .side.picmain {

background-position: 50% 0;

}

.modalpic > .picblock:nth-of-type(2) > .side.picleft {

background-position: 28.5% 0;

}

.modalpic > .picblock:nth-of-type(3) > .side.picmain {

background-position: 96% 50%;

background-size: auto 130%;

}

.modalpic > .picblock:nth-of-type(3) > .side.picleft {

background-position: 78% 50%;

background-size: auto 130%;

}

За основу взято рещение, найденное на codepen.io у пользователя Ivan Bogachev

Пример:

HTML:

CSS:

Смотрите также:

Добавить комментарий: