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