Roman Trukhtanov
позволяют трансформировать элементы, т. е. перемещать их, вращять, наклонять и изменять масштаб, как в двумерном, так и в трехмерном пространстве
Использование CSS трансформацийtransform: [функция трансформации]([значение трансформации])
CSS transform
Contents
задает сдвиг по горизонтали
TranslateX: DEMO Contentsselector {
transform: translateX(10px); /* Сдвиг вправо на 10px */
}
задает сдвиг по вертикали
TranslateY: DEMO Contentsselector {
transform: translateY(15px); /* Сдвиг вниз на 15px */
}
задает сдвиг по горизонтали и по вертикали
Translate: DEMO Contentsselector {
transform: translate(15px, 25%);
}
изменяет масштаб по горизонтали
ScaleX: DEMO Contentsselector {
transform: scaleX(1.5);
}
изменяет масштаб по вертикали
ScaleY: DEMO Contentsselector {
transform: scaleY(2);
}
изменяет масштаб по горизонтали и по вертикали
Scale: DEMO Contentsselector {
transform: scale(1.5, 1.7);
}
задает поворот элемента на нужный градус
Rotate: DEMO Contentsselector {
transform: rotate(45deg);
}
задает наклон элемента относительно оси X
SkewX: DEMO Contentsselector {
transform: skewX(15deg);
}
задает наклон элемента относительно оси Y
SkewY: DEMO Contentsselector {
transform: skewY(20deg);
}
задает наклон элемента относительно оси X и оси Y
Skew: DEMO Contentsselector {
transform: skew(25deg, -20deg);
}
устанавливает координаты точки (anchor point), относительно которой будет происходить трансформация элемента
Transform-Origin Contentstransform-origin: DEMO Contentsselector {
transform-origin: center; /* По умолчанию в центре */
}
<длина> | <проценты> | left | center | right
<длина> | <проценты> | top | center | bottom
только <длина>
задает сдвиг по оси Z
TranslateZ: DEMO Contentsselector {
transform: translateZ(20px);
}
определяет в каком пространстве будут располагаться дочерние элементы
Transform-Style: DEMO Contentsselector {
transform-style: preserve-3d;
}
задает сдвиг по осям X, Y, Z
Translate3D: DEMO Contentsselector {
transform: translate3d(10px, -15px, 20px);
}
задает вращение по оси X
RotateX: DEMO Contentsselector {
transform: rotateX(30deg);
}
задает вращение по оси Y
RotateY: DEMO Contentsselector {
transform: rotateY(-45deg);
}
задает вращение по оси Z
RotateZ: DEMO Contentsselector {
transform: rotateZ(90deg);
}
позволяет задать эффект глубины дочерним элементам
selector {
perspective: 1000px;
}
задает координаты точки схождения, т. е. условно то место, куда смотрит наблюдатель
Perspective-Origin: DEMO Contentsselector {
perspective-origin: left top;
}
<длина> | <проценты> | left | center | right
<длина> | <проценты> | top | center | bottom
определяет видимость обратной стороны элемента, когда он повернут к пользователю
Backface-Visibility: DEMO Contentsselector {
backface-visibility: hidden;
}
default
visible
hidden