Автор

Эффект с помощью CSS3 Transform 3D

Эффект с помощью CSS3 Transform 3D


 

Здравствуйте, уважаемые читатели! Есть много способов, показать информацию о продукте. В этом уроке я собираюсь рассказать Вам, как можно сделать куб с информацией на гранях. Будет применен эффект, который основан на CSS3 Transform 3D. Эффект корректно работает в FF, Chrome и Safari, Opera и IE пока не поддерживают CSS Transform 3D.

 

Результат

Прежде чем говорить о технике создания, следующее изображение является результатом. Изначально описание продукта/сервиса скрыто, на виду лишь логотип. Когда пользователь наводит на логотип курсор мыши, куб будет вращаться вертикально вверх, как-бы показывая нам другую грань с текстовой информацию о продукте, в то время как логотип постепенно исчезнет.

 

ДЕМО
ИСХОДНИКИ

 

Концепция

Как-бы куб состоит из двух элементов, передняя грань и нижняя, на передней находится изображение продукта и информация на нижней. Нижняя грань скрыта, свойство rotateX -90 градусов и translateZ. Подробно об этих свойствах немного ниже.

 

Каждый куб оборачивается в два блока div. Первый wrapper — используется для установления основных стилей, а также настройки точки зрения (свойство perspective). Второй элемент, item — является дочерним к wrapper, оборачивает изображение и описание. При наведении курсора мыши происходит вращение по оси Х на 95 градусов, чтобы скрыть логотип продукта и показать текстовую информацию.

 

 

Разметка и стили

В демонстрационной версии используются изображения продукта из Shopify App Store и описание. Как уже было описано выше, это все оборачивается в два блока div:

<div class="wrapper">
      <div class="item">
        <img src="images/jilt.png" />
        <span class="information">
          <strong>Jilt</strong> Jilt позволяет легко следить за покупателями, которые отказались от покупки.
        </span>
      </div>
    </div>

 

Первый блок div wrapper будет размещаться на странице, как встроенный элемент inline-block и иметь значение 4000px для свойства perspective, которое определяет на сколько пикселей 3D элемент перемещается в представлении. Это свойство позволяет изменять точки просмотра 3D-элементов. Второй блок item определит для дочерних элементов (это изображение и текстовая информация), что они находиться в 3d пространстве transform-style: preserve-3d, а также установит плавное изменение css свойств в течении 0,6 секунд при наведении курсора мыши, свойство transition. Использование свойства transtion. А вот и сами стили:

.wrapper {
  display: inline-block;
  width: 310px;
  height: 100px;
  vertical-align: top;
  margin: 1em 1.5em 2em 0;
  cursor: pointer;
  position: relative;
  font-family: Tahoma, Arial;
  perspective: 4000px;
}
 
.item {
  height: 100px;
  transform-style: preserve-3d;
  transition: transform .6s;
}

 

Пришло время описания стилей и действий для грани с изображением и с текстовой информацией. В дело вступает свойство transform. Для изображения определяется только сдвиг по оси Z на 50px. В то время как для текста еще и осуществляется поворот на -90 градусов по оси Х, то есть текст скрывается под картинкой. Для более элегантного отображения добавим тени. Все эти стили определяют поведение элементов в спокойном состоянии.

.item img {
  display: block;
  position: absolute;
  top: 0;
  border-radius: 3px;
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
  transform: translateZ(50px);
  transition: all .6s;
}
 
.item .information {
  display: block;
  position: absolute;
  top: 0;
  height: 80px;
  width: 290px;
  text-align: left;
  border-radius: 15px;
  padding: 10px;
  font-size: 12px;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  box-shadow: none;
  background: linear-gradient(to bottom,rgba(236,241,244,1) 0%,rgba(190,202,217,1) 100%);
  transform: rotateX(-90deg) translateZ(50px);
  transition: all .6s;
}

 

И последнее, когда пользователь наводит на логотип курсор мыши, то куб начинает вращаться скрывая грань с логотипом и открывая с текстом. Для блока item в состоянии hover прописываем сдвиг по оси Z -50px и поворот на 95 градусов по оси X. Эти значения являются почти зеркальными к предыдущим, поэтому логотип с текстом меняются местами.

.item:hover {
  transform: translateZ(-50px) rotateX(95deg);
}
 
.item:hover img {
  box-shadow: none;
  border-radius: 15px;
}
 
.item:hover .information {
  box-shadow: 0px 3px 8px rgba(0,0,0,0.3);
  border-radius: 3px;
}

 

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


Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Эффект с помощью CSS3 Transform 3D

Здесь можно бесплатно воспользоваться готовыми примерами блочной css верстки слоями. Каждый шаблон ниже содержит готовую резиновую и не резиновую верстку в две или три колонки с различным расположением. Во всех верстках css footer прижат к низу. Каждая div, блочная, дивная верстка валидна и проверена на кроссбраузерность.


Эффект с помощью CSS3 Transform 3D

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


Эффект с помощью CSS3 Transform 3D

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


Эффект с помощью CSS3 Transform 3D

В передыдущих уроках «Интересные кнопки поделиться в соцсетях на CSS3»  и «Анимация кнопки читать в Twitter на CSS3» я писал как можно сделать интересные и необычные кнопки для соцсетей, а самое главное, что без скриптов и на чистом CSS. Продолжая эту тему хочу поделиться очередной рпример оформления своего сайта!


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

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


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close