CSS Transforms

CSS Трансформации

CSS - 2D Transformations (Plan)

CSS - 3D Transformations (Plan)

CSS-трансформации (transformations)

позволяют трансформировать элементы, т. е. перемещать их, вращять, наклонять и изменять масштаб, как в двумерном, так и в трехмерном пространстве

Двумерные Трансформации

Обратная система координат

Свойство transform

transform: [функция трансформации]([значение трансформации])

transform: translateX()

задает сдвиг по горизонтали

            selector {
              transform: translateX(10px); /* Сдвиг вправо на 10px */
            }
        

transform: translateX(<значения>)

• сдвиг по X — задается в "px", "%", "em" и др.

transform: translateY()

задает сдвиг по вертикали

        selector {
          transform: translateY(15px); /* Сдвиг вниз на 15px */
        }
    

transform: translateY(<значения>)

• сдвиг по Y — задается в "px", "%", "em" и др.

transform: translate()

задает сдвиг по горизонтали и по вертикали

            selector {
              transform: translate(15px, 25%);
            }
        

transform: translate(O_x, O_y)

• O_x — задается сдвиг по оси X
• O_y — задается сдвиг по оси Y

transform: scaleX()

изменяет масштаб по горизонтали

            selector {
              transform: scaleX(1.5);
            }
        

transform: scaleX(<значения>)

• Масштаб по оси X — задается коэффициентом (k)
  • Если k > 1, то элемент растягивается
  • Если k < 1, то элемент сжимается
  • Если k < 0, то элемент зеркально отразится по оси X

transform: scaleY()

изменяет масштаб по вертикали

        selector {
          transform: scaleY(2);
        }
    

transform: scaleY(<значения>)

• Масштаб по оси Y — задается коэффициентом (k)
  • Если k > 1, то элемент растягивается
  • Если k < 1, то элемент сжимается
  • Если k < 0, то элемент зеркально отразится по оси Y

transform: scale()

изменяет масштаб по горизонтали и по вертикали

            selector {
              transform: scale(1.5, 1.7);
            }
        

transform: scale(O_x, O_y)

• O_x — изменяет масштаб по оси X
• O_y — изменяет масштаб по оси Y

transform: rotate()

задает поворот элемента на нужный градус

        selector {
          transform: rotate(45deg);
        }
    

transform: rotate(<значения>)

• поворот — задается в "deg", "rad", "grad" и "turn"
  • Если угол положительный, то элемент поворачивается по часовой стрелке
  • Если угол отрицательный, то элемент поворачивается против часовой стрелки

transform: skewX()

задает наклон элемента относительно оси X

            selector {
              transform: skewX(15deg);
            }
        

transform: skewX(<значения>)

• наклон — задается в "deg", "rad", "grad" и "turn"
  • Если угол положительный, то элемент наклоняется против часовой стрелки
  • Если угол отрицательный, то элемент наклоняется по часовой стрелке

transform: skewY()

задает наклон элемента относительно оси Y

        selector {
          transform: skewY(20deg);
        }
    

transform: skewY(<значения>)

• наклон — задается в "deg", "rad", "grad" и "turn"
  • Если угол положительный, то элемент наклоняется по часовой стрелке
  • Если угол отрицательный, то элемент наклоняется против часовой стрелки

transform: skew()

задает наклон элемента относительно оси X и оси Y

        selector {
          transform: skew(25deg, -20deg);
        }
    

transform: skew(O_x, O_y)

• O_x — изменяет наклон по оси X
• O_y — изменяет наклон по оси Y

Свойство transform-origin

устанавливает координаты точки (anchor point), относительно которой будет происходить трансформация элемента

transform-origin

      selector {
        transform-origin: center; /* По умолчанию в центре */
      }
    

transform-origin: O_x O_y O_z

• O_x — координата по оси X

  <длина> | <проценты> | left | center | right

• O_y — координата по оси Y

  <длина> | <проценты> | top | center | bottom

• O_z — координата по оси Z

  только <длина>

transform-origin + rotate(25deg)

Трехмерные Трансформации

Координатная система в трехмерном пространстве

transform: translateZ()

задает сдвиг по оси Z

        selector {
          transform: translateZ(20px);
        }
    

transform: translateZ(<значения>)

• сдвиг по Z — задается в "px", "em" и др. (но не в "%")

transform-style

определяет в каком пространстве будут располагаться дочерние элементы

            selector {
              transform-style: preserve-3d;
            }
        

transform-style: <значения>

• flat — дочерние элементы будут располагаться в плоскости
• preserve-3d — дочерние элементы будут располагаться в 3D пространстве

transform: translate3d()

задает сдвиг по осям X, Y, Z

        selector {
          transform: translate3d(10px, -15px, 20px);
        }
    

transform: translate3d(O_x, O_y, O_z)

• O_x — задается сдвиг по оси X
• O_y — задается сдвиг по оси Y
• O_z — задается сдвиг по оси Z

transform: rotateX()

задает вращение по оси X

            selector {
              transform: rotateX(30deg);
            }
        

transform: rotateX(<значения>)

• поворот — задается в "deg", "rad", "grad" и "turn"

transform: rotateY()

задает вращение по оси Y

        selector {
          transform: rotateY(-45deg);
        }
    

transform: rotateY(<значения>)

• поворот — задается в "deg", "rad", "grad" и "turn"

transform: rotateZ()

задает вращение по оси Z

        selector {
          transform: rotateZ(90deg);
        }
    

transform: rotateZ(<значения>)

• поворот — задается в "deg", "rad", "grad" и "turn"

perspective

позволяет задать эффект глубины дочерним элементам

        selector {
          perspective: 1000px;
        }
    

perspective: <значения>

• none — эффект глубины не будет применен
• <длина> — задается в "px", "em" и др.

perspective-origin

задает координаты точки схождения, т. е. условно то место, куда смотрит наблюдатель

        selector {
          perspective-origin: left top;
        }
    

perspective-origin: O_x O_y

• O_x — координата по оси X

  <длина> | <проценты> | left | center | right

• O_y — координата по оси Y

  <длина> | <проценты> | top | center | bottom

perspective-origin + translateZ(-100px)

backface-visibility

определяет видимость обратной стороны элемента, когда он повернут к пользователю

        selector {
          backface-visibility: hidden;
        }
    

backface-visibility: <значения>

• visible — обратная сторона будет видна
• hidden — обратная сторона не будет видна