logo

3D-трансформация в примерах

Альбомная трансформация

В следующем примере при наведении курсора на изображение как бы открывается обложка альбома, открывая скрытую, но «важную» информацию.


<div class="turn__info  turn__info_bg">
  <div class="turn__info_wrap">
    <div class="turn__info_inf">
      <div class="turn__info_inf-front turn__info_bg"></div>
      <div class="turn__info_inf-back">
        <p class="turn__info_inf-back-zag">Uniform Title</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit......</p>
      </div>
    </div>
  </div>
</div>

.turn__info {
    width: 356px;
    height: 222px;
    margin: 15px;
    float: left;
    position: relative;
    box-shadow: 3px 3px 7px rgba(0, 0, 0, .5);
}
.turn__info:hover .turn__info_inf-front {
    transform: rotate3d(1, 0, 0, -180deg);
    box-shadow: 3px -3px 12px rgba(0, 0, 0, 1);
}
.turn__info:hover .turn__info_inf-back {
    background: rgba(185, 178, 237, 0.29);
}

.turn__info_bg {
    background-image: url(images/img.jpg);
}
.turn__info_wrap,
.turn__info_inf {
    position: absolute;
    width: 356px;
    height: 222px;
    transition: all .4s ease-in-out;
    perspective: 1300px;
}
.turn__info_wrap {
    top: 0;
    left: 0;
    background: #fefefe;
}
.turn__info_inf {
    transform-style: preserve-3d;
}
.turn__info_inf>div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center center;
    transition: all .6s ease-in-out;
}
.turn__info_inf .turn__info_inf-front {
    transform-origin: 50% 100%;
    z-index: 100;
    box-shadow: inset 2px 1px 4px rgba(0, 0, 0, 0.1);
}
.turn__info_inf .turn__info_inf-back {
    background: rgba(48, 33, 230, 0.4);
}
.turn__info_inf-back-zag {
    font-size: 20px;
    font-style: italic;
    text-align: center;
    margin: 15px;
}
.turn__info_inf-back-p {
    padding: 0 15px;
}

Для того, чтобы «открытие» происходило в другом направлении достаточно изменить всего 2 строчки. Ниже приводится пример, необходимые изменения выделены цветом


.turn__info:hover .turn__info_inf-front {
    transform: rotate3d(0, 1, 0, 180deg);
    box-shadow: 3px -3px 12px rgba(0, 0, 0, 1);
}

.turn__info_inf .turn__info_inf-front {
    transform-origin: 100% 50%;
    z-index: 100;
    box-shadow: inset 2px 1px 4px rgba(0, 0, 0, 0.1);
}

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

Uniform Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto reprehenderit dolorum voluptate ex ullam nemo excepturi! Nostrum unde, id laboriosam distinctio obcaecati quam.

Uniform Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed numquam ipsam ratione fugit magni quis, tenetur provident similique possimus accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed numquam ipsam ratione fugit magni quis, tenetur provident similique possimus accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, accusantium vel quis natus id rem fuga ipsam illum dolore, nihil! Veniam, accusantium vel quis natus id rem fuga ipsam illum dolore, nihil!

Продается дом!

Адрес:……
Состояние:……
Размеры:……
Коммуникации:……

Uniform Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed numquam ipsam ratione fugit magni quis, tenetur possimus accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed numquam ipsam ratione fugit magni quis, tenetur provident similique possimus accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam, accusantium vel quis natus id rem fuga ipsam illum dolore, nihil!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed numquam ipsam ratione fugit magni quis, tenetur provident similique possimus accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni tempore alias eveniet animi deleniti eligendi nobis, tempora nostrum quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet quia veritatis, dolor, alias soluta aspernatur dicta. Quibusdam delectus, voluptas ut fuga alias optio. Placeat rerum neque omnis, voluptas, ad aut!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed numquam ipsam ratione fugit magni quis, tenetur provident similique possimus accusantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni tempore alias eveniet animi deleniti eligendi nobis, tempora nostrum quidem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet quia veritatis, dolor, alias soluta aspernatur dicta. Quibusdam delectus, voluptas ut fuga alias optio. Placeat rerum neque omnis, voluptas, ad aut! Quibusdam delectus, voluptas ut fuga alias optio. Placeat rerum neque omnis, voluptas, ad aut!

Блоки в перспективе

Первоначально блоки с анонсом мы видим в перспективе, при наведении мышки блок принимает нормальный вид. Блок анонса состоит из 2 блоков: первый содержит изображение, второй текстовую информацию и ссылку на полную версию.


<div class="anons">
  <div class="anons__pic">
      <img  class="anons__pic_img" src="images/pic.jpg" alt="Синтра" />
  </div>
  <div class="anons__info">
    <h4 class="anons__info_zag">Синтра</h4>
    <p class="anons__info_text">Синтра — Cтаринный португальский город, расположенный в 23 километрах...
      <a class="anons__info_link" href="#" title="Синтра"> &#160;&#160;Читать &gt;&gt;&gt;</a>
    </p>
  </div>
</div>

Каждый из блоков повернут на 30 градусов относительно оси Y. При наведении угол изменяется до 0 градусов.


.anons {
  font-family: Tahoma, sans-serif;
  width: 300px;
  margin: 50px;
  position: relative;
  perspective: 400px;
  transform-style: preserve-3d;
  transition: all 2.5s ;
}
.anons__pic  {
  position: relative;
  z-index: 9;
  border:5px solid #fcfafa;
  box-shadow:0 3px 10px #888;
  overflow: hidden;
  transform: rotateY(30deg);
  transition:all  2.5s ease-in;
}
.anons__pic_img {
  vertical-align: middle;
}
.anons__info {
  position: relative;
  z-index: 10;
  width: 85%;
  margin: -17px auto 0;
  background:#deddcd;
  padding: 5px;
  border:5px solid #fcfafa;
  box-shadow:0 20px 40px #888;;
  transform: translateZ(30px) rotateY(30deg);
  transition: all 2.5s ease-in;
}
.anons__info_zag {
  text-align: center;
  font-size: 14px;
  letter-spacing: 1.2px;
}
.anons__info_text {
  font-size: 12px;
  text-align: left;
  line-height: 16px
}
.anons__info_link {
  color: #a84a07;
  text-decoration: none;
  float: right;
  transition: all .3s;

}
.anons__info_link:hover {
  text-shadow: 0 0 1px #c7ab97;
}
.anons:hover {
  perspective: 5000px;
}
.anons:hover .anons__pic{
  transform: rotateY(0deg);
  transition: all 2.5s ease-out;
}
.anons:hover .anons__info {
  transform:  rotateY(0deg);
  transition: all 2.5s ease-out;
}

В результате получаем…

Синтра

Синтра

Синтра — старинный португальский город, расположенный в 23 километрах…
  Читать >>>

Полнолуние

Полнолуние

Когда Земля приближается к положению между Луной и Солнцем, Луна получает…
  Читать >>>


Практические примеры 0

Рекомендую прочитать...

Анимация SVG — иконок
Анимация SVG-иконок

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

Читать полностью
3D-трансформации
3D-трансформации

С помощью 3D-трансформации создаются объемные реалистичные эффекты на веб-страницах. В отличии от простой ( в одной плоскости ) трансформации в 3D-трансформации элементы могут дополнительно перемещаться вдоль оси Z. Для того, чтобы создать объемное перемещение элемента необходимо для родительского блока задать свойство perspective.

Читать полностью
Трансформация «Дверной глазок»
трансформация Дверной глазок

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

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.