CSS3笔记（四）2D转换 与 渐变

过渡属性

过渡：由一种状态 渐渐的 过渡到另一种状态

transition:过渡属性  持续时间 延迟  运动曲线;
transition：all 1s;
all:所有的属性都发生过渡

transition-property:过渡的属性 all  width
transition-duration:持续时间 1s
transition-delay: 过渡延迟执行1s;
transition-timing-function:运动曲线
    linear 线性匀速
    ease-in-out　先加速 后减速
    transition-delay: 延迟执行

线性渐变（background-image）

background-image: linear-gradient(135deg,yellow,green);
linear-gradient(方向，起始颜色，终止颜色);
            方向：to left   to right  to top   to bottom 　角度　30deg
            起始颜色
            终止颜色

径向渐变（background-image）

background-image: radial-gradient(at left top,yellow,green);
radial-gradient(辐射半径,中心点位置，起始颜色，终止颜色);
            中心点位置：
            at  center  left  top  right bottom
            at 50px  50px

            辐射半径：
            50px
            50px 100px

2D转换

如果多个属性发生过渡，多个属性连写，之间使用空格隔开
transform:translate(-200px,200px) rotate(45deg);

• 1、缩放 scale

transform: scale(2,0.5);
transform: scale(水平缩放比例，垂直缩放比例);
如果只有一个值，等比例缩放
        不能使用百分比
        大于1放大，小于1缩小

• 2、变换位移 translate

transform:translate(-50%,-50%);
transform: translate(-100px,-100px);
transform: translate(水平位移，垂直位移）；
如果只有一个值，只会水平方向发生位移
可以使用百分比，相对于盒子自身而言的
正值 向下向右   负值 向上向左

• 3、旋转 rotate

transform:rotate(-45deg);
角度 deg
正值  顺时针
负值  逆时针

• 3、扭曲 skew

transform:skew(30deg,0deg);
skew(水平角度，垂直的角度)
规律： 当前方向设置了扭曲的角度后，当前这把条边的角度不变，另一条边会产生要给夹角

• 4、设置变换中心

transform-origin:left;  /*变换中心*/
取值：left  top center  right bottom    50px 50px；