Галерея изображений с 3D эффектом на CSS3
|
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 |
div.flip-3d { perspective: 1200px; width: 28%; display: inline-block; margin: 2%; } div.flip-3d figure { position: relative; transform-style: preserve-3d; transition: 1s transform; font-size: 1.6rem; } div.flip-3d figure img { width: 100%; height: auto; } div.flip-3d figure figcaption { position: absolute; width: 100%; height: 100%; top: 0; transform: rotateY(.5turn) translateZ(1px); background: rgba(255, 255, 255, 0.9); text-align: center; padding-top: 45%; opacity: 0.6; transition: 1s .5s opacity; font-size: 50%; } div.flip-3d:hover figure { transform: rotateY(.5turn); } div.flip-3d:hover figure figcaption { opacity: 1; } div.flip-3d figure:after { content: " "; display: block; height: 8vw; width: 100%; transform: rotateX(90deg); background-image: radial-gradient(ellipse closest-side, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0) 100%); } @media screen and (max-width: 800px) { div#flip-3d { perspective-origin: center top; } div#flip-3d figure { display: block; width: 50%; margin: 0 auto; margin-bottom: 12vw; } div#flip-3d figure:last-child { display: none; } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div class="flip-3d"> <figure> <img src="ССЫЛКА_НА_КАРТИНКУ" alt> <figcaption>Это яхта в море</figcaption> </figure> </div> <div class="flip-3d"> <figure> <img src="ССЫЛКА_НА_КАРТИНКУ" alt> <figcaption>А это пчёлка</figcaption> </figure> </div> <div class="flip-3d"> <figure> <img src="ССЫЛКА_НА_КАРТИНКУ" alt> <figcaption>А вот это холмы</figcaption> </figure> </div> |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
