Мой Справочник | CSS3 | Трансформации

transform
Трансформация	`Синтаксис: transform: вид_трансформации(значение);`	Примеры будут работать при НАВЕДЕНИИ КУРСОРА мыши на ячейку таблицы
transition-duration
ДЛИТЕЛЬНОСТЬ трансформации	`transition-duration: 1s;`	Длительность трансформации 1 секунда. Будет во всех примерах
translateX, translateY, translate
ПЕРЕМЕЩЕНИЕ	`transform: translateX(100px);`	Перемещение по оси X на 100px: Text
	`transform: translateY(50px);`	Перемещение по оси Y на 50px: Text
	`transform: translate(100px, 50px);`	Перемещение по оси X на 100px, по Y на 50px: Text
scaleX, scaleY, scale
ИЗМЕНЕНИЕ РАЗМЕРА	`transform: scaleX(2);`	Уменьшение в 2 раза по oX Text
	`transform: scaleY(2);`	Увлеличение в 2 раза по oY Text
	`transform: scale(2);`	Увлеличение в 2 раза Text
	`transform: scaleX(-1);`	Получается перевёрнутый вид по oX Text
	`transform: scaleY(-1);`	Получается перевёрнутый вид по oY Text
	`transform: scale(-1);`	Получается перевёрнутый вид Text
rotate
ПОВОРОТ	`transform: rotate(45deg);`	Поворот на 45 градусов по часовой Text
ПОВОРОТ	`transform: rotate(-45deg);`	Поворот на 45 градусов против часовой Text
skewX, skewY, skew
УГЛОВОЕ ИСКАЖЕНИЕ	`transform: skewX(45deg);`	На 45 градусов по оси x Text
	`transform: skewY(45deg);`	На 45 градусов по оси y Text
	`transform: skew(45deg, 45deg);`	На 45 градусов по оси x и y, при этом объект исчезает Text
Множественная трансформация
Множественная трансформация, записываются через пробел	`transform: rotate(135deg) scale(1.5);`	Text
transform-origin
Положение элемента после трансформации, задаёт, где будет располагаться объект после трансформации относительно своего исходного положения, также это выбор оси вращения для rotate	`transform: scale(0.2); transform-origin: 0% 0%;`	Аналог: top left; Text
	`transform: scale(0.2); transform-origin: 100% 100%;`	Аналог: right bottom; Text
	`transform: scale(0.2); transform-origin: 0% 100%;`	Аналог: left bottom; Text
	`transform: scale(0.2); transform-origin: 50% 50%;`	Задано по ум*, аналог: center center; Text
	`transform: scale(0.2); transform-origin: right center;`	Text
	`transform: rotate(360deg); transform-origin: right bottom;`	Выбор оси вращения Text