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

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

Анимированный логотип на чистом CSS
Анимированный логотип

Если вы посмотрите на логотип, он состоит из 4 основных цветных точек. Эти точки расширяются и принимают вид скругленных линий, затем сжимаются, принимая первоначальный вид.

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

Читать полностью
Lightbox на чистом CSS3 без JavaScript
Lightbox на чистом CSS3 без использования JavaScript

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

Читать полностью
Коллекция Hover.css
Коллекция Hover.css

Hover.css это коллекция CSS3 эффектов, которые можно использовать для анимации при наведении на них курсора. Содержит более 100 эффектов: 2D-трансформации, тени, границы, использование библиотеки иконок.
Пользоваться данной коллекцией очень просто: скачиваем архив ZIP, в папке css находим файл hover.css и загружаем его на сайт. Лучше конечно воспользоваться его минимизированной копией hover-min.css

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

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

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

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