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

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

Бегущая строка при помощи анимации на CSS3
Бегущая строка на CSS3

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

Читать полностью
Свойство clip-path и модальное окно
C-p-&-modal

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента, а при помощи border-radius создаются закругления углов. Но возможности этих свойств ограничиваются видом прямоугольника или прямоугольника с закругленными углами, возможность заключить выбранный элемент в круг или овал. Но заключить элемент в многоугольную, не симметричную, очень сложной конфигурации границу при помощи этих свойств у нас не получиться…

Читать полностью
Как изменить цвет изображения
как изменить цвет изображения

Как! Во многих интернет магазинах присутствует такая штука: цвет товара меняет свой цвет. Т.е. при клике на один из представленных цветов товар, как правило, это одежда, автомашина, чехлы для телефона или сам телефон меняет свою цветовую окраску. Со стороны кажется, что товар как бы заливается выбранным цветом, или приобретает тот орнамент ( часто представлены при […]

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

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

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

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