Твит

Салют, наш читатель! В рунете существует множество блогов, похожих на наш, и многие из них занимаются переводом статей с забугорных ресурсов по веб-дизайну и верстке. И вот я решил заняться тем же, переведя статью с сайта webstuffshare.com. Сегодня мы с вами создадим очень интересный 3D куб с картинкой, который при наведении переворачивается и показывает нам небольшое текстовое описание, выглядит очень впечатляюще! Итак, поехали!
Есть много способов представления информации о продукте, например, при наведении курсора на изображение, текст о продукте скользит в разные стороны или даже куда-то уплывает. В этом уроке я собираюсь рассказать Вам о том, как показать информацию о продукте в кубе с использованием CSS3 3D Transform.

Твит

Есть много способов, показать информацию о продукте. В этом уроке я собираюсь рассказать Вам, как можно сделать куб с информацией на гранях. Будет применен эффект, который основан на CSS3 Transform 3D. Эффект корректно работает в FF, Chrome и Safari, Opera и IE пока не поддерживают CSS Transform 3D.

Изначально описание продукта/сервиса скрыто, на виду лишь логотип. Когда пользователь наводит на логотип курсор мыши, куб будет вращаться вертикально вверх, как-бы показывая нам другую грань с текстовой информацию о продукте, в то время как логотип постепенно исчезнет.

Твит

Новые свойства CSS3 позволяют делать очень много всего интересного. Сегодня мы рассмотрим несколько примеров, в котором создадим 10 разных эффектов при наведении курсора мыши на изображение. Мы будем показывать поверх изображения описание. Следует учесть, что данный эффект будет работать только в современных браузерах, которые поддерживают нововведения CSS3.

Эффекты при наведении для изображений с использованием CSS3