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);