缩放:scale
作用:
使元素在位置或者形状上发生一定的改变。
属性:
transform
属性值:
scale:缩放(一般)
translate 位移(重点)
rotate 旋转(重点)
skew 倾斜(了解)
scale 缩放
格式: transform:scale(x,y)
x:表示水平方向上的缩放倍数
y:表示垂直方向上的缩放倍数
如果只写一个值表示等比例缩放。
【注意】
1.缩放只是一种视觉效果,不会对别的盒子造成影响。
2.取值大于1表示放大,小于1表示缩小。
位移:translate
格式:
transform:translate(水平位移量,垂直位移量)
取值:水平位移量为正,向右移动,垂直方向的正方形为下。
只写一个值,表示水平位移量。
参数为百分比的话,是相对于自身的宽高。
位移只是一种视觉效果,不会对别的盒子造成影响。
旋转:rotate
格式:transform:rotate(角度(deg))
单位:deg,正值:顺时针,负值:逆时针。
转换原点:
transform-origin:水平坐标,垂直坐标。
取值:
px
单词
center left top right bottom
倾斜:skew
格式:
transform:skew(水平倾斜角度,垂直倾斜角度)
单位:deg 正值:顺指针 负值:逆时针
两个角度相交,不要大于等于90deg.
【注意点】
1.转换操作不会影响到其他元素
2.只能添加给块元素,不能添加给行内元素。
3.同时添加多个变形操作,先执行前面的,再执行后面的。
4.多个变形操作必须写在一个transform属性后面,书写多次transform属性 时,后面的会层叠掉前面的。