2d变换:
位移 transform:translate();
旋转 transform:rotate();
缩放 transform:scale();
倾斜 transform:skew();
###位移
transform:translate();
:
transform:translate(水平位移,垂直位移);
transform:translate(水平位移);
transform:translateX(水平位移);
transform:translateY(垂直位移);
###渐变: 由浏览器生成的
线性渐变:
background: -webkit-linear-gradient(方向,颜色1,颜色2,颜色3,....颜色n);
background: linear-gradient(to 方向,颜色1,颜色2,颜色3,....颜色n);
1 单一方向渐变:
left 从左边开始
right 从右边开始
top 从上边开始
bottom 从底部开始
注意: 需要添加兼容前缀
to left 到左边(结束位置)
to right 到右边
to top 到顶部
to bottom 到底部
注意: 不要添加兼容前缀
2 对角渐变:
left top 左上开始
left bottom 左下开始
right top 右上开始
注意: 带兼容前缀
to left top 到左上(结束位置)注意: 不带兼容前缀
3 角度的渐变
10deg 10度
4 默认情况下颜色趋于均分
可以指定颜色分布的百分比,让颜色按照百分比进行渐变
blue 10% 到10% 都是蓝色
red 10px 到10px都是红色
默认情况: 正值 从上往下,从左往右
###缩放: transform:scale(水平垂直都缩放);
transform:scale(水平缩放,垂直缩放);
transform:scaleY(垂直缩X放);
transform:scaleX(水平缩放);
取值范围: 0-0.9999999 缩小
取值等于1
原来大小
取值
大于1 放大