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

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

ОБСУЖДЕНИЕ

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

Блок на CSS3 c эффектом 3D трансформации
Просмотров: 2840  Скачан: 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

Оригинальные кнопки на css3, вам дано на выбор несколько кнопок, каждая по своему привлекательна, без сомнения посетители вашего сайта не останутся ра...

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

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

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

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

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

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

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

Pack кнопок 2, в паке представлены 20 кнопок на css3 с разными иконками....

Набор пиктограммных кнопок на css3Набор пиктограммных кнопок на css3

Отличный набор пиктограмных кнопок с применением иконического шрифта. В наборе представлены как......

Анимационная кнопка с помощью css3Анимационная кнопка с помощью css3

Красивая анимационная кнопка похожая на 3D, при наведении курсора мыши на кнопку, она плавно......
Интересные публикации:

CharismaCharisma

Профессиональный шаблон административной панели, построенный на HTML5, в шаблоне имеются: закладки, меню, галерея, набор кнопок......

Lotus Flower v1.2Lotus Flower v1.2

Lotus Flower - это современный универсальный шаблон для WordPress с адаптивной вёрсткой и большим функционалом....

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

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

Контактная форма (дизайн)Контактная форма (дизайн)

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

Music v1.4.3Music v1.4.3

Music - это шаблон музыкального портала для wordpress с уникальным набором функций и настроек....

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

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

Стильные кнопки социальных сетей (Facbook, Twitter, Google+) с применением иконических шрифтов....
  • Текущий 2.09/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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