CSS 5DX

transform: skew(angle)

Задает скос элемента относительно осей X и Y, и точки задаваемой свойством transform-origin.

.element {
	transform: skew(30deg [, 30deg ]?);
}

perspective: none | length;

Задает глубину сцены родителю

.wrapper {
	perspective: 200px;
}
.block1 {
	width: 300px
	transform: rotateY(60deg);
}

transform: perspective( length )

3адает глубину сцены конкретному елементу

.block1 {
	transform: perspective(200px) rotateY(60deg);
}
.block2 {
	transform: perspective(400px) rotateY(60deg);
}

perspective-origin:

Устанавливает точку с которой зритель смотрит на сцену по осям X и Y.

.wrapper {
	perspective-origin: [ key-word | % | length ]
}

transform-origin: X, Y [,Z]?

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

.element{
	transform-origin: 50% 50% 0;
}

transform-style:

Определяет как вложенные элементы будут отображаться в трехмерном пространстве.

.wrapper {
	transform-style: flat | preserve-3d;
}

backface-visibility:

Определяет будет ли видно контент элемента, который с помощью 3D трансформаций отвернут лицом от пользователя.

.element {
	backface-visibility: [ visible | hidden ];
}

Перемещение

transform: translate( value )

Задает сдвиг элемента относительно осей X, Y, Z и точки задаваемой свойством transform-origin.

.element {
	transform: translate( 100px [, 50% ]? );
}

transform: rotate( angle );

Задает поворот элемента относительно осей X, Y, Z и точки задаваемой свойством transform-origin.

.element {
	transform: rotateZ( 30deg );
}

transform: scale( number );

Маштабирует элемент относительно осей X, Y и Z, и точки задаваемой свойством transform-origin.

.element {
	transform: scale( 1 [, 2 ]? );
}

Маленький лайфхак

Если задать scale c минусовым значением блок отобразится зеркально.

.element {
	transform: scale( -1 );
}

transform: matrix(a, b, c, d, e, f)

Описывает в виде матрицы 2D преобразования элемента.

.element {
	transform: matrix( a, b, 0,
					   c, d, 0,
					   tx, ty, 0 );
}

transform: matrix3d()

Описывает в виде матрицы 3D преобразования элемента.

.element {
	transform: matrix3d( sx, 0, 0, 0,
 						 0, sy, 0, 0,
 						 0, 0, sz, 0,
 						 0, 0, 0, 1 );
}

Предупреди браузер

will-change: auto | prop [, prop]?

Свойсто will-changeпозволяет заранее проинформировать браузер об изменениях, которые возможно будут применены к элементу. И применить к нему апаратное ускорение.

requestAnimationFrame

var frameId;
function repeatOften() {
	//magic
	frameId = requestAnimationFrame(repeatOften);
}
cancelAnimationFrame(frameId);

Event throttle

var lastMove = 0;
var myEventInterval = 40;//for example
element.addEventListener( "mousemove", function() {
	if(Date.now() - lastMove > myEventInterval) {
		eventHendler(event);
		lastMove = Date.now();
	}
});