transform
transform的中文翻译就是变换,改变,改观,转换的意思
在css中的主要作用就是对一个div或元素进行样式的改变。
他的属性(变换方式)有:平移,旋转,缩放,扭曲
translate(10px,20px;) 指定对象的2D平移,第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
translateX:10px; 指定对象X轴(水平方向)的平移
translateY:20px; 指定对象Y轴(垂直方向)的平移
rotate(30deg); 指定对象的2D旋转,需要先有transform-origin属性的定义
scale(1.2,1.2); 指定对象的2D缩放,第一个参数对应X轴,第二个参数对应Y轴,如果第二个参数没有提供,则默认取第一个参数的值。
scaleX(1.2); 指定对象X轴的(水平方向)缩放
scaleY(1.2); 指定对象Y轴的(垂直方向)缩放
skew(-5deg,-5deg); 指定对象扭曲,第一个参数对应X轴,第二个参数对应Y轴,如果第二个参数没有提供,则默认值0
skewX(-5deg); 指定对象X轴的(水平方向)扭曲
skewY(-5deg); 指定对象Y轴的(垂直方向)扭曲
transform-origin
origin的中文翻译是起源,根源的意思,顾名思义,transform-origin是设置对象以某个原点进行转换。
transform-origin:(50%,50%);
这个属性有两个参数,第一个是横坐标值,第二个是纵坐标值,默认都是50%,如果只有一个值,用于横坐标,纵坐标是默认值50%
left 指定原点的横坐标为center
center 指定原点的横坐标为center
right 指定原点的横坐标为right
top 指定原点的纵坐标为top
center 指定原点的纵坐标为center
bottom 指定原点的纵坐标为bottom