3D увеличение изображения при нажатии с CSS3 и JQuery!

Сегодня мы хотим поделиться с Вами одним из наших экспериментов с 3D-преобразования – увеличения изображения при нажатии. Идея состоит в том, чтобы показать полноэкранную версию изображения путем вращения двух блоков в трехмерном пространстве. Другие эффекты с изображениями, смотрите здесь.

Мы будем использовать Modernizr, чтобы знать – поддерживает ли браузер пользователя используемые свойства CSS3 или нет. Если нет, то мы будем использовать другой запасной вариант.

Как работает этот 3D эффект?

В нашем небольшом эксперименте все изображения лежат внутри fd-wrapper:

Информация о пути к полноэкранному изображению будет записана через атрибут data-bgimg.
Мы будем использовать изображения в HTML структуре, которую заранее определим в JQuery. Эта структура состоит из двух коробок-блоков, верхнего и нижнего, каждый из которых имеет шесть граней.

Когда мы нажимаем на иконку просмотра полноэкранного изображения, верхний блок будет вращаться, показывая свою нижнюю поверхность, а в нижний блок будет вращаться вниз, показывая свою верхнюю поверхности.

Нижняя поверхность верхнего прямоугольника будет иметь половину увеличенного изображения в качестве фона и верхняя поверхность нижнего блока будет иметь нижнюю часть изображения:

Опции эффекта

Существуют следующие параметры по умолчанию:

• current: 0, – индекс текущего изображения;
• width: 600, – ширина изображения;
• height: 400, – высота изображения;
• perspective: 550, – значение WebKit-перспективы;
• speed: 750, – скорость вращения и появления изображения;
• easing: 'ease-in-out', – смягчение вращательного эффекта, плавность;
• onLoad: function() { return false; } – срабатывает, когда слайд-шоу инициализируется.

Заключение

Вот и всё! Думаю получился очень интересный и довольно востребованный эффект. Экспериментируйте, и создавайте свои шедевры! Успехов!