Day19 CSS Transform

设定transform属性可以使文字或图像有旋转(rotate)、缩放(scale)、倾斜(skew)、移动(translate)这四种类型的变形效果。

transform属性可以设定哪些变形方式?

2D transform

translate移动 (单位: px/em/in/%)

• transform: translateX( );
• transform: translateX( );
• transform: translateY( );

例如:
设定向右50px向下100px移动

div {
 transform: translate(50px, 100px);
 }

rotate 设定顺时钟或逆时钟方向旋转多少度数

• rotate( ?deg)
  例如:
  设定顺时钟旋转20度

div {
  transform: rotate(20deg);
}

用负值设定逆时钟旋转20度

div {
  transform: rotate(-20deg);
}

scale 设定缩放比例

对元素的大小比例进行放大或缩小
例如: 2代表2倍大，0.5代表一半大小

• transform: scaleX(数值);设定水平缩放
• transform: scaleY(数值);设定垂直缩放
• transform: scale(数值, 数值); 设定水平和垂直缩放
  例如:

div {
  transform: scale(2, 3);
}

div {
  transform: scale(0.5, 0.5);
}

skew设定倾斜角度

• transform: skewX( ?deg);设定水平方向倾斜角度
• transform: skewY( ?deg);设定垂直方向倾斜角度
• transform: skew( ? deg, ? deg);设定水平&垂直方向倾斜角度

例如:

div {
  transform: skew(20deg, 10deg);
}

matrix将以上的设定都写在一起

顺序如下:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());

例如:

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

参考资料:
CSS 2D Transforms

3D transform

设定立体的旋转变形方式，和2D比多了一个Z轴可以设定

• transform: rotateZ(? deg);

参考资料:
CSS 3D Transforms

transform-origin 设定变形的起始位置

变形的预设起点是 (center , center) 中心点
若要将变形起始位置更改，就必须设定transform-origin属性，可以用正负数来更改，或是用top/center/bottom(top = 0%, bottom=100%)、left/center/right(left = 0%, right = 100%)等值来更改起始位置

例如:

transform-origin:100px 20px;
transform-origin:right;

参考资料:CSS没有极限 - CSS transform 概观, CSS属性篇(二)：transform属性,transform-origin
图片来源: https://unsplash.com/s/photos/ferris-wheel

以上为个人学习笔记整理
若有错误，欢迎指正