Автор

Эффект с помощью 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;
}

 

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Сегодня мы решили подготовить хорошиую css3 галерею. Без использования javascript. Да, да, вы правильно поняли. Сегодня мы не будем использовать скрипты. Это будет чистая CSS3 фото галерея. Фотографии в галерее будет увеличиваться, если мы будем нажимать на них мышью.


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

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


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

В этой статье подготовлены 8 интересных эффектов для изображений, которые Вы можете применить на своем сайте. Каждый эффект состоит из HTML разметки и стилей CSS. Вам остается только скопировать и добавить в свой исходный код.


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

Бывают такие ситуации, когда необходимо реализовать достаточно простые эффекты, но из-за упущенных элементарных знаний возникают сложности. Так мы сегодня решили Вам рассказать и показать процесс реализации простого hover-эффекта для изображений с эффектом параллакса. Идея достаточно проста и банальна, у нас есть изображение, которое мы помещаем в рамку и скрываем края, при наведении курсора мыши изображение будет оживать и следовать за курсором, что придаст эффект «живого» изображения для ваших картинок.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close