css的transform中的 translate scale rotate skew origin细节介绍

transform属性介绍

translate 平移

给元素做简单的位移的时候一般用这个，不是布局只是位移

如下
一个值

transform: tanslate(100px);

两个值

transform: tanslate(100px,0);

上面代码的意思是x轴方向移动100px，x轴方向移动就是向右移动100px

transform: tanslate(50%);

这句代码的意思就是参照元素本省在x方向上移动50%

scale 缩放

这个就可以像上面的类比，很简单的

注意的是这个缩放的原点是元素的中心点：如下


没有制作动态图，看不出来 ，但是 上图鼠标点的位置就是缩放的原点

那么有什么可以改变缩放的原点了如下

origin

改变变形的原点，默认值是中心点

rotate 旋转

tansform: ratate(45deg)  顺时针旋转45都

skew 倾斜

tansform: skew(50deg); 顺时针倾斜50度