Вращающаяся 3D галерея изображений на чистом CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container"> <div id="carousel"> <figure><img src="/img/1.jpg" alt=""></figure> <figure><img src="/img/2.jpg" alt=""></figure> <figure><img src="/img/3.jpg" alt=""></figure> <figure><img src="/img/4.jpg" alt=""></figure> <figure><img src="/img/5.jpg" alt=""></figure> <figure><img src="/img/6.jpg" alt=""></figure> <figure><img src="/img/7.jpg" alt=""></figure> <figure><img src="/img/8.jpg" alt=""></figure> <figure><img src="/img/9.jpg" alt=""></figure> </div> </div> |
|
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 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
@import url(http://fonts.googleapis.com/css?family=Anaheim); .container { margin: 4% auto; width: 210px; height: 140px; position: relative; perspective: 1000px; } #carousel { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; animation: rotation 20s infinite linear; } #carousel:hover { animation-play-state: paused; } #carousel figure { display: block; position: absolute; width: 186px; height: 116px; left: 10px; top: 10px; background: black; overflow: hidden; border: solid 5px black; } #carousel figure:nth-child(1) { transform: rotateY(0deg) translateZ(288px); } #carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px); } #carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px); } #carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px); } #carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px); } #carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px); } #carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px); } #carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px); } #carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px); } #carousel img { -webkit-filter: grayscale(1); cursor: pointer; transition: all .5s ease; } #carousel img:hover { -webkit-filter: grayscale(0); transform: scale(1.2, 1.2); } @keyframes rotation { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } } |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
