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

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

3D-трансформации
3D-трансформации

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

Читать полностью
Тег  <hr>  или просто линия
Или просто линия

Линия. Что может быть проще? Провел карандашом по листу бумаги, получите — линия. Причем эта линия может быть прямой, кривой, волнистой, угловатой, короче — любой. В HTML для того, чтобы нарисовать линию служит тег hr .Он создает на странице линию, простую линию, которую разные браузеры отображают по своему (может незначительно отличаться цвет и ширина)

Читать полностью
Свойство text-shadow
Свойство text-shadow

Свойство text-shadow позволяет видоизменить внешний вид текста . Его применяют для того, чтобы выделить какую-то часть текста (или слово) . Обычное использование для заголовков, ссылок — текста на который следует обратить внимание. Да и просто наличие тени у слова красиво смотрится.

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

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

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

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