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

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

ОБСУЖДЕНИЕ

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

Блок на CSS3 c эффектом 3D трансформации
Просмотров: 2459  Скачан: 61 раз  Комментариев в теме: 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, кнопки разного цвета и размера (голубой, розовый, зелёный, оранжевый)....

Кнопка с анимационным фоном на css3Кнопка с анимационным фоном на css3

Отличная кнопка на css3, кнопка реально классная и удобная, да и привлекает глаза посетителя....

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....

VIP кнопка на css3VIP кнопка на css3

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

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

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

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

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

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

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

Softdate Pro v1.3Softdate Pro v1.3

Softdate pro - это социальная платформа знакомств, которая предоставляет возможность общаться с людьми......

Галерея в сетку с помощью jQueryГалерея в сетку с помощью jQuery

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

Широкоформатный слайдер (видео, изображение, текст)Широкоформатный слайдер (видео, изображе...

Отличный слайдер с богатым набором функций, можно использовать (видео, изображение, текст)....

FolderFolder

Универсальный html шаблон Folder, на главной странице располагается слайдер с миниатюрами и комментариями к изображению, есть галерея......

Оригинальная анимационная контактная формаОригинальная анимационная контактная фор...

Оригинальная анимационная контактная форма, в довольно привлекательном стиле. Форма представлена в виде открытого конверта, при наведении курсора мыши...

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

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

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

Красивый адаптивный слайдер с параллакс эффектом на чистом CSS3....
  • Текущий 2.13/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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

Страницы: 1

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


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