Сьогодні я хочу розповісти Вам про ще один 3D-експеримент: 3D CSS галерея у вигляді кімнати. Ідея полягає в тому, щоб створити реалістичну виставку зображень з використанням CSS 3D transforms. Зображення будуть розвішані вздовж стіни, розмір стіни залежить від кількості зображень. Як тільки дійдемо до кінця стіни, плавно перейдемо до наступної стіни з іншими зображеннями. Щоб додати реальне відчуття перебування в кімнаті, створимо чотири стіни. У кожного зображення буде тег title як опис, при натисканні по опису, відображаємо зображення в повному розмірі.
Рекомендуємо переглядати демонстраційні приклади в Google Chrome.
Ми використовуємо таку розмітку, щоб додати зображення в CSS галерею:
Потім перетворимо її в наступну структуру, яка матиме "кімнату" з основною стіною:
Встановимо розмір стіни, виходячи від сумарної ширини зображень і розділимо на 4, так як у нас є чотири стіни. Ми також можемо поставити кількість елементів на стіні за допомогою масиву, як в демо:
Після того як ми дійдемо до кінця стіни, додамо динамічно ще одну стіну і встановимо властивість transforms таким чином, як ніби вона знаходиться праворуч від основної стіни.
При великому розмірі екрану, ми зможемо побачити сусідні зображення:
При натисканні на опису, відкриється зображення в повному розмірі:
При натисканні на стрілку навігації, ми перейдемо до наступного або попереднього зображення. Коли дійдемо до кінця css галереї. повернемо на наступну:
Наступне зображення буде розміщено на іншій стіні:
Після того як ми подивимося все зображення, ми опинимося на первісної стіні:
Найбільша проблема такого роду експериментів - підтримка 3D-transforms в різних браузерах і звичайно продуктивність.
На жаль, продуктивність сильно страждає, якщо додати тіні, тому в демо ми їх не використовуємо.