Автор

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

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


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

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

Еще одна полезная для сайтов вещь - вставка текущей даты. Примеров скриптов даты можно найти в интернете десятки, однако многие из них, на мой взгляд, тяжеловесны и, следовательно, некрасивы. Между тем, используя стандартные средства JavaScript, вставить дату на страницу сайта можно очень просто. Я его очень часто применяю! На картинке (скриншот с действующего сайта)  усадьбы «Сказка»!


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

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

Галерея iLoad позволит вам удобно и эффектно показать фотографии вашим посетителям. Внешний вид галереи легко изменяется и вы быстро сможете настроить галерею под стиль своего сайта. iLoad позволяет показывать одиночные изображения, группировать изображения и создавать слайд шоу. Галерея поддерживает все современные браузеры, а так же InternetExplorer с 6 по 9 версию. iLoad не использует сторонние фреймворки, такие как jQuery, Prototype и так далее!


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

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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close