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

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

ОБСУЖДЕНИЕ

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

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

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

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

Тот же принцип действия что и в РАСКРЫВАЮЩИЕСЯ КНОПКЕ которую вы возможно уже видели, но с......

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

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

Социальная выпадающая панель на cssСоциальная выпадающая панель на css

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

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

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

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

Социальные иконки на css3, при наведении курсора на иконку, она делается полупрозрачной....

Mega Web Buttons PackMega Web Buttons Pack

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

VLDPersonals v2.7VLDPersonals v2.7

VLDPersonals - это функциональный движок с огромным количеством возможностей, который вмещает в себе социальную сеть и сайт знакомств....

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

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

Слайдер на jQuery «Featured Content Slider»Слайдер на jQuery «Featured Content Slid...

Лёгкий слайдер с авто-листанием на jquery, в слайдере вы множите полноценно использовать текст, изображения....

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

Portfolio SitePortfolio Site

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

World WideWorld Wide

WorldWide - это премиум тема wordpress для сайтов новостной и журнальной тематики с поддержкой плагина WPML и WooCommerce....

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

Привлекательная кнопка с ряда (checkbox), как все вы наверное уже догадались, кнопка имитирует реалистично кнопку включения....
  • Текущий 2.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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