background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Блок c эффектом 3D трансформации

Блок на CSS3 c эффектом 3D трансформации
Просмотров: 2367  Скачан: 60 раз  Комментариев в теме: 0

Представленый блок реализован с помощью css3 и использует 3D трансформацию для изменения своего вида. Другими словами когда вы наводите на блок курсор мыши, он плавно перекручивается. Такой 3D эффект выглядит очень красиво, но не стоит забывать, что такая 3D трансформация будет работать только в современных браузерах, в более старых версиях, это будет просто блок без каких либо эффектов.

Шаг 1 - создание разметки

 

HTML

<div id="container">  
    <div class="wrapper">
        <div class="item">
            <img src="images/contact.png" />
            <span class="information">
                <strong>Contact Form</strong> The easiest way to add a contact form to your shop.
            </span>
        </div>
    </div>   
    <div class="wrapper">
        <div class="item">
            <img src="images/chimpified.jpeg" />
            <span class="information">
                <strong>Chimpified</strong> Chimpified connects your Shopify store to your Mailchimp account.
            </span>
        </div>
    </div>   
    <div class="wrapper">
        <div class="item">
            <img src="images/olark.png" />
            <span class="information">
                <strong>Olark Chat</strong> Chat with your customers. Watch them fill their shopping carts.
            </span>
        </div>
    </div>
    <div class="wrapper">
        <div class="item">
            <img src="images/jilt.png" />
            <span class="information">
                <strong>Jilt</strong> Jilt lets you easily and effectively follow up with customers who have abandoned their orders.
            </span>
        </div>
    </div>
    <div class="wrapper">
        <div class="item">
            <img src="images/ordoro.png" />
            <span class="information">
                <strong>Ordoro</strong> Automate your backoffice: aggregate orders, manage inventory, print shipping labels.
            </span>
        </div>
    </div>
    <div class="wrapper">
        <div class="item">
            <img src="images/yotpo.jpeg" />
            <span class="information">
                <strong>Yotpo</strong> Social reviewing solution,increase your social engagement through social reviews.
            </span>
        </div>
    </div>   
</div> 

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" href="css/style.css" type="text/css" />
Материалы по теме:

Сборка кнопок #2 на css3Сборка кнопок #2 на css3

В сборку вошли 12 неплохих кнопок на css. Кнопки работают в браузерах OPERA, Firefox, Chrome, IE....

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном...

Красивая кнопка на css3, анимация фона происходит при наведении курсора на кнопку....

12 кнопок с анимацией на css312 кнопок с анимацией на css3

Представлено 12 кнопок с разной анимацией, так как кнопки на css3, в старых браузерах полноценно они работать не будут....

Оригинальные кнопки на cssОригинальные кнопки на css

Красивые кнопки, прекрасно подойдут любому сайту, все сделано на чистом css....

Mega Web Buttons PackMega Web Buttons Pack

Mega Pack кнопок на css, в паке собрано около 40-ка кнопок с разными иконками....

Радиоактивные кнопкиРадиоактивные кнопки

Красивые кнопки с эффектом радиации. Так, как на данный момент не все браузеры поддерживают свойство webkit, то такой эффект будет работать только......

Кнопки с градиентом на css3Кнопки с градиентом на css3

Кнопки с градиентом, такие кнопки можно встретить довольно часто......
Интересные публикации:

Оригинальное горизонтальное менюОригинальное горизонтальное меню

Красивое горизонтальное меню в оригинальном стиле, в меню используется большое количество позиций......

30 анимационных кнопок на CSS330 анимационных кнопок на CSS3

Неплохие анимационные кнопки на css3, имеются 30 кнопок, в том числе и 3D....

Cumico v1.4Cumico v1.4

Универсальная премиум тема для WordPress с адаптивной вёрсткой и стильным дизайном. Возможность подключить Woocommerce это идеальное решение для......

Миниатюра изображений плагин «Grid Navigation Effects»Миниатюра изображений плагин «Grid Navig...

Оригинальная навигация в виде миниатюр изображений, если быть точнее, то это jQuery плагин «Grid Navigation Effects» который может похвастаться своими...

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Кнопка вкл/выкл (checkbox) на CSS3Кнопка вкл/выкл (checkbox) на CSS3

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....

4Images 1.7.11 RUS4Images 1.7.11 RUS

Это отличная фото-галерея с довольно сильным функционалом....
  • Текущий 2.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 2.1/5( Голосов 8 )

Комментариев в теме: (2)
↑ 0 ↓
Сергей
На ie11 не работает.
Ответить Ответ с цитатой
↑ 0 ↓
ADMIN
Да действительно, полноценно не работает. IE не сильно дружит с 3D трансформацией.

Ответить Ответ с цитатой

Страницы: 1

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить