Трансформации это есть эффекты различного рода изменений нормального положения и состояния блочных элементов.

Используя свойство transform можно элемент сдвинуть, повернуть, прокрутить, растянуть, сжать, и т.д., и т.п.

Начнем с теории вопроса.

Таблица свойств CSS 3. Трансформации плоские и объемные. Transforms 2D, 3D.

NN	Свойство	Гугль Хром	FireFox	IE	Safari	Opera
134	transform	-webkit-	16	10	-webkit-	12.1
135	transform-origin	-webkit-	16	10	-webkit-	12.1
136	transform-style	-webkit-	-	-	-webkit- 5	-

Небольшой игровой тренажер для лучшего понимания трансформаций плоских и объемных.


Трансформации плоские. Transforms 2D.

Трансформации плоские (2D) имеют следующие методы:

• translate() - перемещение. Элемент перемещается на заданное количество точек по осям X и Y. Пример: transform: translate(50px,100px);
• rotate() - вращение. Элемент вращается на заданное количество градусов по часовой стрелке или против часовой стрелки (если задано отрицательное значение). Пример: transform: rotate(30deg);
• scale() - растяжение или сжатие. Элемент растягивается по осям X и Y в заданное количество раз. Пример: transform: scale(2,4); - растягивается в 2 раза по ширине и в 4 раза по высоте.
• skew() - поворот. Элемент поворачивается на заданное количество градусов по осям X и Y. Пример: transform: skew(30deg,20deg);
• matrix() - комбинация всех методов плоской трансформации 2D. Пример: transform:matrix(0.866,0.5,-0.5,0.866,0,0);

translate() - перемещение.


rotate() - вращение.


scale() - растяжение или сжатие.


skew() - поворот.


skew() - поворот с добавлением transform-origin:0% 0%;


matrix() - комбинация всех методов плоской трансформации 2D.


Трансформации объемные. Transforms 3D.

Трансформации объемные (3D) имеют следующие методы:

• rotateX() - вращение по оси X. Пример: transform: rotateX(120deg);
• rotateY() - вращение по оси Y. Пример: transform: rotateY(120deg);

rotateX() - вращение по оси X.


rotateY() - вращение по оси Y.


Теперь отобразим новые полученные знания на нашем учебном тестовом примере.
css_050_001.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
css_050_001.zip ← скачайте пример, чтобы установить на свой сайт...