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 есть такое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

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

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

Читать полностью
Ссылки, события при наведении и клике

Стандартный вид ссылки это текст темно-фиолетового цвета, подчеркнутый снизу. При клике цвет изменяется на красный и подчеркивание остается. Первоначально верстальщики обходились малым: меняли цвет первоначального текста, убирали подчеркивание при наведении и клике, изменяя при этом и цвет ссылки.

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

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

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

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