CSS3 позволяет производить перемещение, масштабирование, повороты и наклоны блоков без использования JavaScript. Для этого используется своство transform
, которому передается одно или несколько действий через пробел. Порядок следования трансформации важен, так как при разном порядке могут получаться разные результаты.
tranform: действие(...);
Свойство transform-origin
задает точку отсчета системы координат, от которой будет работать трансформация (по умолчанию равна 50% 50%
= центр объекта).
transform-origin: точка-отсчета-по-X [, точка-отсчета-по-Y];
Возможные действия transform
translate
— перемещение объекта по горизонтали и вертикали (translateX
— горизонтальное перемещение, translateY
— вертикальное перемещение). Возможные единицы измерения —px
, %
, em
, in
.
transform: translateX(100px) translateY(-50px) translate(-50%, 10em);
scale
— масштабирование объекта (scaleX
по щирине, scaleY
по высоте)
scale(0.5, 0.5) /* уменьшит объект в 2 раза по высоте и ширине */
scaleX(2) /* увеличит объект в 2 раза по ширине */
scaleY(1) /* оставит объект по высоте без изменений */
scale(0) /* полностью «схлопнет» объект, и его не будет видно */
scaleX(-1) /* оригинальный объект зеркально отражается по горизонтали */
scale(-1, -1) /* объект зеркально отражается и по оси X, и Y */
rotate
— поворот объекта (на * градусов). При повороте вместе с объектом на заданный угол поворачивается и его система координат.
transform-origin: top left;
transform: rotate(180deg);
transform: rotate(-90deg);
skewX
— наклон объекта по оси X под заданным углом. Положительное значение угла X наклоняет блок влево, а отрицательное — вправо.
skewY
— наклон объекта по оси Y. Положительное значение угла Y наклоняет блок вниз, а отрицатеьное — вверх.
transform: skewX(25deg);
transform: skewY(25deg);