3D-преобразования с помощью CSS3 - Блог ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

    Выбери свою IT специальность

    Подписка

    Выбери свою IT специальность

    Подписка

      3D-преобразования с помощью CSS3

      advertisement advertisement

      Введение

      Продолжая серию статей о реализации анимации, которая реализуется без знаний Javascript, стоит отметить, что использование 2D зачастую не производит на пользователя должного впечатления. Несомненно, 2D-преобразования, реализованные с использованием каскадных таблиц стилей CSS3, освобождают нас от написания нескольких строк JavaScript кода, и тем более от подключения разного рода фреймворков. Но нельзя того же сказать и про 3D-преобразования, которые также реализуются без скриптов, но в то же время обеспечивают ощущение объемности объектов на странице, придавая им 3-х мерности. К тому же, на сегодняшний день большинство браузеров актуальных версий поддерживают эти эффекты.


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

      Так, используя свойство transform вместе с функциональной аннотацией perspective, можно добиться объемности визуального эффекта.

      <head>

          <title>title>

          <style>

              div {

                  width: 400px;

                  height: 400px;

                  margin: 100px;

                  float:left;

                  background-color: ActiveCaption;

              }

              #clear:hover {

                  transform: rotateY(45deg);

                  transition: 3s;

              }

              #perspective:hover {

                  transform: perspective(500px) rotateY(45deg);

                  transition: 3s;

              }

          style>

      head>

      <body>

          <div id="clear">div>

          <div id="perspective">div>

      body>

      Объемность визуального эффекта

      Кроме того, стоит помнить, что вы можете комбинировать направления поворотов, обеспечивая своего рода несколько степеней свободы.

      <head>

          <title>title>

          <style>

              #id1 {

                  margin: 100px;

                  transition: 3s;

              }

              #id1:hover {

                  transform: rotateY(45deg) rotateX(45deg);

                  transition: 3s;

              }

              #id2 {

                  margin: 100px auto;

                  transition: 3s;

              }

              #id2:hover {

                  transform: perspective(400px) rotateY(45deg) rotateX(45deg);

                  transition: 3s;

              }

          style>

      head>

      <body>

          <img id="id1" src="cloud.png" />

          <img id="id2" src="cloud.png" />

      body>

      Калибровка поворотовКалибровка поворотов 

      С помощью несложных манипуляций вы сможете достичь интересных эффектов:

      <head>

          <title>title>

          <style>

              #overlay {

                  margin: 100px auto;

                  width: 150px;

                  height: 150px;

                  background: gold;

                  border-radius: 100%;

                  border: 10px double #794103;

                  box-shadow: 0 0 15px #808080;

              }

                  #overlay:hover {

                      background: #794103;

                      border: 10px double gold;

                  }

                  #overlay:hover #inner {

                      width: 130px;

                      height: 130px;

                      border-radius: 100%;

                      background-color: #794103;

                      border: 3px dashed gold;

                      transform: rotateX( 180deg );

                  }

              #inner {

                  width: 130px;

                  height: 130px;

                  margin: 7px;

                  border-radius: 100%;

                  background-color: gold;

                  border: 3px dashed #794103;

                  transition: all 1s ease-out;

              }

                

          style>

      head>

      <body>

          <div id="overlay">

              <div id="inner">div>

          div>

      body>

      Эффект 1 Эффект 2Эффект 3Эффект 4

      Трехмерные переходы, безусловно, изменят правила игры и дадут нам, веб-разработчикам, несомненно, лучшие возможности делать плавную анимацию, не прибегая к Flash. В этой статье мы познакомились лишь с частью возможностей Transform Properties. Сами по себе они не могут служить универсальным решением, но, когда мы начинаем трансформировать элементы вокруг с помощью свойства transition, начинается самое интересное. Но с этим свойством мы детальней познакомимся с следующей статье.

      КОММЕНТАРИИ И ОБСУЖДЕНИЯ
      advertisement advertisement

      Покупай подпискус доступом ко всем курсам и сервисам

      Библиотека современных IT знаний в удобном формате

      Выбирай свой вариант подписки в зависимости от задач, стоящих перед тобой. Но если нужно пройти полное обучение с нуля до уровня специалиста, то лучше выбирать Базовый или Премиум. А для того чтобы изучить 2-3 новые технологии, или повторить знания, готовясь к собеседованию, подойдет Пакет Стартовый.

      Стартовый
      • Все видеокурсы на 3 месяца
      • Тестирование по 10 курсам
      • Проверка 5 домашних заданий
      • Консультация с тренером 30 мин
      59.99 $
      Оформить подписку
      Базовый
      • Все видеокурсы на 6 месяцев
      • Тестирование по 16 курсам
      • Проверка 10 домашних заданий
      • Консультация с тренером 60 мин
      89.99 $
      Оформить подписку
      Премиум
      • Все видеокурсы на 1 год
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      169.99 $
      Оформить подписку
      Notification success
      Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.