Властивості CSS3 для перетворення - Блог ITVDN
ITVDN: курси програмування
Відеокурси з
програмування

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

    Почати безкоштовно

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

    Почати безкоштовно

      Властивості CSS3 для перетворення

      advertisement advertisement

      Введение

      Чем больше браузеров начинает поддерживать CSS3, тем больше веб-разработчиков начинает использовать некоторые интересные возможности данной технологии. А именно, совмещая работу CSS3 в связке с HTML5 и JavaScript, реализовывать разного рода графические эффекты. В итоге и появилось сленговое название для этих подходов - «Flash-killer».

      В серии статей рассмотрим основные дополнения к CSS3, познакомимся с простейшими 2D и 3D преобразованиями.

      Свойства CSS3 – Transform являются, пожалуй, наиболее популярными преобразованиями, которые позволяют применять векторные изменения к HTML элементам, расположенным на странице. Вы сможете контролировать наклон, масштабирование и поворот любого элемента на web-странице. Стоит отметить, что подобные эффекты предпочтительно применять исключительно к изображениям и другим графическим элементам, которые не содержат текстовой информации, поскольку искажение текста существенно снижает его читаемость. Итак, познакомимся с основными функциями свойства transform:


      1. Skew отвечает за наклон элемента, может принимать два параметра. Первый отвечает за ось X, другой за ось Y, иначе говоря, наклоны по горизонтали или вертикали. 

        <head>

          <title>title>

          <style>

              div {

                  width: 400px;

                  height: 200px;

                  background-color: crimson;

                  margin:100px;

                  font-size:50px;

                  color: white;

              }

              #skew1 {

                  transform: skew(30deg);

              }

              #skew2 {

                  transform: skew(-30deg);

              }

              #skew3 {

                  transform: skew(10deg, 10deg);

              }

              #skew4 {

                  transform: skewX(10deg);

                  transform: skewY(-10deg);

              }

          style>

      head>

      <body>

          <div id="clear">Example Textdiv>

          <div id="skew1">Example Text 1div>

          <div id="skew2">Example Text 2div>

          <div id="skew3">Example Text 3div>

          <div id="skew4">Example Text 4div>

      body>

       
      Наклон элемента

      2. Scale отвечает за масштабирование элемента по горизонтали и вертикали. Также используется и в частных случаях как ScaleX и ScaleY.

      <head>

          <title>title>

          <style>

              div {

                  width: 400px;

                  height: 200px;

                  background-color: ActiveCaption;

                  margin: 150px;

                  font-size: 50px;

                  color: white;

                  transform: scale(1)

              }

              #scale {

                  transform: scale(1.5);

              }

               #scaleX {

                  transform: scaleX(1.5);

              }

                #scaleY {

                  transform: scaleY(1.7);

              }

           style>

      head>

      <body>

          <div id="clear">Example Textdiv>

          <div id="scale">Example Text 1div>

          <div id="scaleX">Example Text 2div>

          <div id="scaleY">Example Text 3div>

      body>

      Масштабирование элемента
       

      3. Rotate задает поворот элемента относительно точки трансформации, которая в свою очередь задается свойством transform-origin. В простейшем использовании обеспечивает поворот элемента за или против часовой стрелки относительно центра. 

      <head>

          <title>title>

          <style>

              div {

                  width: 400px;

                  height: 200px;

                  background-color: chocolate;

                  margin:100px;

                  font-size:50px;

                  color: white;

              }

              #rotateL {

                  transform: rotate(-10deg);

              }

              #rotateR {

                  transform: rotate(10deg);

              }

           style>

      head>

      <body>

          <div id="clear">Example Textdiv>

          <div id="rotateL">Example Text 1div>

          <div id="rotateR">Example Text 2div>

      body>

      Поворот элемента относительно точки трансформации

      4. Translate обеспечивает сдвиг элемента на определенное значение по горизонтали и вертикали. TranslateX  отвечает за смещение по горизонтали, принимая положительное значение, сдвигает вправо, а принимая отрицательное значение, сдвигает влево. TranslateY  действует аналогично по вертикальной направленности. Положительное принятое значение сдвигает элемент вниз, а отрицательное - вверх.

      <head>

          <title>title>

          <style>

               div {

                  width: 400px;

                  height: 200px;

                  background-color: crimson;

                  margin:100px;

                  font-size:50px;

                  color: white;

              }

              #translateL {

                  transform: translateX(-30px);

              }

              #translateR {

                  transform: translateX(30px);

              }

              #translateU {

                  transform: translateY(-20px);

              }

              #translateD {

                  transform: translateY(20px);

              }

          style>

      head>

      <body>

          <div id="clear">Example Textdiv>

          <div id="translateL">Example Text 1div>

          <div id="translateR">Example Text 2div>

          <div id="translateU">Example Text 3div>

          <div id="translateD">Example Text 4div>

      body>

      Сдвиг элемента
       

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

      <head>

          <title>title>

          <style>

              #example {

                  width: 400px;

                  height: 400px;

                  background-color: #aa9fd5;

                  margin: 300px auto;

                  font-size: 50px;

                  color: white;

              }

                  #example:hover {

                      transform: skew(30deg) scale(1.5,1.5) rotate(40deg) translateY(150px);

                  }

           style>

      head>

      <body>

          <div id="example">Transformdiv>

      body>

       

       

      Стоит помнить, что подобные манипуляции при статическом отображении не обеспечат у пользователя особого восхищения. Для того, чтобы привлечь внимание пользователя, стоит уделить время добавлению динамики на страницу. Об этом мы поговорим в следующих статьях из этого цикла. 

      КОМЕНТАРІ ТА ОБГОВОРЕННЯ
      advertisement advertisement

      Пакети підписки з доступом до всіх курсів та сервісів

      Стартовий
      • Усі відеокурси на 3 місяці
      • Тестування з 10 курсів
      • Перевірка 5 домашніх завдань
      • Консультація з тренером 30 хв
      Базовий
      • Усі відеокурси на 6 місяців
      • Тестування з 16 курсів
      • Перевірка 10 домашніх завдань
      • Консультація з тренером 60 хв
      Преміум
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      new
      Преміум Plus
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      • Завантаження відео уроків
      Notification success
      Ми використовуємо cookie-файли, щоб зробити взаємодію з нашими веб-сайтами та послугами простою та значущою.