Трансформации плоские. 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() - перемещение.
До трансформации...
После трансформации...
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(120deg);
- rotateY() - вращение по оси Y. Пример: transform: rotateY(120deg);
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);
