3D витрина продукции для сайта с помощью CSS3 | RUDEBOXСоздавая сайт целевой направленности, к примеру продажа книг, шаблонов или прочих материалов, вам необходимо выделить важную продукцию. Ну, к примеру, акционная продукция или хит продаж, и разместить это в шапке сайта. В данном уроке мы рассмотрим процесс создания замечательной, объемной витрины с продукцией для сайта с помощью jQuery. Основная идея состоит в том, что изображения парят в воздуха, раскачиваются со стороны в сторону и создают иллюзию зависания в воздухе. Давайте посмотрим, что у нас с этого получилось.

Витрина будет отображать не только продукцию но и слоган, который также будет парить вместе и с изображениями. Слоган будет располагаться в середине между изображений продукта. Эти изображения будут повернуты в вокруг оси у с углом поворота -35 градусов для левого изображения и 35 градусов для правого.

Шаг 1. HTML

Слоган и изображения будут помещены в середину элемента div с классом wrapper-item, для изображений будут соответствующие классы left и right ( относительно их положений на странице ). Все эти элементы будут заключены в контейнер.

С разметкой мы разобрались, переходим к следующему шагу.

3D витрина продукции для сайта с помощью CSS3 RUDEBOX

Шаг 2. CSS

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

Каждое изображение в витрине будет поддаваться бесконечному циклу анимации. Чтобы сделать ее ( анимацию ) более привлекательной мы добавим задержки для каждого изображения.

Нам необходимо добавить эффект вращения для элемента wrapper-item,  вращение будет начинаться с 0 градусов до 35 градусов затем обратно с -35 градусов и до 0 градусов. Эта анимация будет повторятся только 3 раза, с задержкой в 3 секунды на старте.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.