ZorNet.Ru — сайт для вебмастера » HTML и CSS » Создать анимацию вращения элемента на CSS

Создать анимацию вращения элемента на CSS

Существуют различные способы, чтоб создать эффектов поворота элементов дизайн при помощи CSS, но вот пример создания 3D анимации при помощи CSS3 и HTML. Анимация, это популярные эффекты CSS, которые показывают как спереди, так и сзади элемент HTML, поворачивая их сверху вниз или слева направо, в нашем случай будет идти с право налево. Они представляют собой рад в двух измерениях, но они еще более холодны при 3D. Существует много методов по созданию эффектов для поворота элемента, где помощью jQuery, но вот пример создания 3D анимации при помощи CSS3 и HTML. Возможно вы такую конструкцию встречали, она похоже на афишу, только не вы ходите вокруг, а она поворачивается при наведении клика.

Вы можете использовать свойство CSS в сочетании с функциями для создания потрясающего эффекта перелистывание и поворота без использования какого-либо JavaScript. В этом посте вы узнаете, как создавать простые 3D-кнопки и добавлять флип анимацию к ним. Вы можете увидеть результат на demo, что предоставлено ниже, если вы нажмете на кнопки, они будут выполнять помеченную флип анимацию. Если вы будете следовать за правым краем карты, вы обнаружите, что она остается на одном уровне с контейнером.

В следующем примере есть два изображения, один, это лицевая сторона, а другая - задняя сторона карты pocker, где задняя сторона расположена над лицевой стороной, используя метод позиционирования CSS, так что вначале только одна сторона карты видимый. Когда вы поместите курсор на заднюю сторону изображения карты, он вращается и будет отображаться лицевая сторона карты. Как так и задний элементы таковы, что задняя сторона перевернутых элементов не отображается во время преобразования, что создает иллюзию вращения 3D.

Эффект ниже показывает тип анимации 3D-флип, которую мы собираемся создать:

Приступаем к установке:

HTML

Код

<div id="stustratospere">
  <div class="availanext-generation overstock">
  <h1>ZorNet.Ru: Портал</h1>
  <p>Проведя первую часть года, застрявшую в стратосфере - здесь тдет описание на первой стороне </p>
  </div>

  <div class="availanext-generation nowledge">
  <h1>ZorNet.Ru: Сайт</h1>
  <p>Описание, что покажется при повороте на второй стороне. </p>
  </div>
</div>

CSS

Код

.availanext-generation {
  position: absolute;
  height: 375px;
  width: 375px;
  padding: 15px;
  background-color: #f7f5f5;
  border: solid 1px #a9a8a8;
}
#stustratospere .overstock {
  -webkit-transform: translateZ(200px);
  transform: translateZ(200px);
}

#stustratospere .nowledge {
  -webkit-transform: rotateY(90deg) translateZ(200px);
  transform: rotateY(90deg) translateZ(200px);
}

#stustratospere {
  position: relative;
  margin: 0px;
  height: 395px;
  width: 395px;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 3s ease;
  transform-style: preserve-3d;
  transition: all 3s ease;
}
#stustratospere:hover{
  transform: rotateY(-90deg);
}

Вместо поворота от горизонтального центра он поворачивается на этом правом краю. Но переход, где не просто поворот, а край движется горизонтально справа налево. Мы можем воспроизвести этот переход, просто изменив пару строк CSS из нашей оригинальной версии.

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

Демонстрация

16 Июля 2018 Просмотров: 1490 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0