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

文章目录

    • transform属性介绍
    • translate 平移
    • scale 缩放
    • origin
    • rotate 旋转
    • skew 倾斜

transform属性介绍

css的transform中的 translate scale rotate skew origin细节介绍_第1张图片

translate 平移

给元素做简单的位移的时候一般用这个,不是布局只是位移
css的transform中的 translate scale rotate skew origin细节介绍_第2张图片
如下
一个值

transform: tanslate(100px);

两个值

transform: tanslate(100px,0);

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

css的transform中的 translate scale rotate skew origin细节介绍_第3张图片

transform: tanslate(50%);

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

scale 缩放

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

css的transform中的 translate scale rotate skew origin细节介绍_第4张图片
css的transform中的 translate scale rotate skew origin细节介绍_第5张图片
注意的是这个缩放的原点是元素的中心点:如下
css的transform中的 translate scale rotate skew origin细节介绍_第6张图片
css的transform中的 translate scale rotate skew origin细节介绍_第7张图片
没有制作动态图,看不出来 ,但是 上图鼠标点的位置就是缩放的原点

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

origin

改变变形的原点,默认值是中心点
css的transform中的 translate scale rotate skew origin细节介绍_第8张图片

rotate 旋转

css的transform中的 translate scale rotate skew origin细节介绍_第9张图片
css的transform中的 translate scale rotate skew origin细节介绍_第10张图片

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

skew 倾斜

css的transform中的 translate scale rotate skew origin细节介绍_第11张图片

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

css的transform中的 translate scale rotate skew origin细节介绍_第12张图片

你可能感兴趣的:(html,css)