Курс CSS. Пример 01 урока 50.

Оператор поддержки
Птичка CSS - это наше всё!
Трансформации плоские. Transforms 2D.

Трансформации плоские (2D) имеют следующие методы: translate() - перемещение.
До трансформации...
После трансформации...
transform: translate(100px,30px);
-ms-transform: translate(120px,20px);
-webkit-transform: translate(120px,20px);


rotate() - вращение.
До трансформации...
После трансформации...
transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);


scale() - растяжение или сжатие.
До трансформации...
После трансформации...
transform: scale(0.8,0.9);
-ms-transform: scale(0.8,0.9);
-webkit-transform: scale(0.8,0.9);


skew() - поворот.
До трансформации...
После трансформации...
transform: skew(-10deg,-20deg);
-ms-transform: skew(-10deg,-20deg);
-webkit-transform: skew(-10deg,-20deg);


skew() - поворот с добавлением transform-origin:0% 0%;
До трансформации...
После трансформации...
transform: skew(-10deg,-20deg);
transform-origin:0% 0%;
-ms-transform: skew(-10deg,-20deg);
-ms-transform-origin:0% 0%;
-webkit-transform: skew(-10deg,-20deg);
-webkit-transform-origin:0% 0%;
opacity: 0.8;


matrix() - комбинация всех методов плоской трансформации 2D.
До трансформации...
После трансформации...
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);


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

Трансформации объемные (3D) имеют следующие методы: rotateX() - вращение по оси X.
До трансформации...
После трансформации...
transform:rotateX(40deg);
-ms-transform:rotateX(40deg);
-webkit-transform:rotateX(40deg);


rotateY() - вращение по оси Y.
До трансформации...
После трансформации...
transform:rotateY(40deg);
-ms-transform:rotateY(40deg);
-webkit-transform:rotateY(40deg);