逆战班 css3属性 2d变换 渐变

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           放大

###旋转：transform:rotate(60deg);