Пример:
Выбрать другое фото для примера:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
CSS:
Размер картины задается CSS-свойством aspect-ratio, меняя эту пропорцию, можно подогнать ее под любой размер изображения. Например, для квадратного фото, эта пропорция будет aspect-ratio: 1.5 / 1
|
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 60 61 62 63 64 65 66 67 68 69 70 |
.modalpic { position: relative; aspect-ratio: 2.5 / 1; 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
Добавить комментарий: