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

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

ОБСУЖДЕНИЕ

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

Блок на CSS3 c эффектом 3D трансформации
Просмотров: 3523  Скачан: 64 раз  Комментариев в теме: 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" />
Материалы по теме:

Кнопка с ценником на css3Кнопка с ценником на css3

Красивая анимационная кнопка с ценником, кнопка представлена в разных цветовых стилях (зелёный, синий). При наведении курсора на кнопку, иконка......

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

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

Социальные кнопки на CSSСоциальные кнопки на CSS

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....

Сборка социальных кнопок на css3Сборка социальных кнопок на css3

Неплохая сборка социальных кнопок на css3, к кнопкам применён иконический шрифт....

Кнопки для вашего сайта на css3Кнопки для вашего сайта на css3

Неплохие кнопки для вашего сайта на css3, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....

Чекбокс на css3Чекбокс на css3

Чекбокс имитирующий реалистично кнопку включения, идея в принципе неплохая, но......

Pack кнопок на CSS3Pack кнопок на CSS3

Pack стильных кнопок на css3, в паке представлены восемь кнопок разного размера и цвета....
Интересные публикации:

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......

Полноэкранное слайд-шоу с помощью JQuery плагинаПолноэкранное слайд-шоу с помощью JQuery...

Jquery плагин «SuperSized», плагин можно использовать в ранних направлениях, одно с таких, это полно-экранное слайд-шоу....

css3 слайдерcss3 слайдер

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....

Слайдер в стиле AppleСлайдер в стиле Apple

Стильный слайдер в стиле Apple на css и jquery, в слайдере используется красивый эффект перехода между категориями....

Горизонтальное меню на jQuery «Menu Kwicks»Горизонтальное меню на jQuery «Menu Kwic...

Стильное горизонтальное меню с выдвижными иконками

Вертикальное мульти менюВертикальное мульти меню

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......

Социальные иконки на css3Социальные иконки на css3

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....
  • Текущий 1.88/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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