2D

渐变

线性渐变:
        background-image: linear-gradient(方位,颜色值1,颜色值2....);
重复渐变:
        background-image: repeating-linear-gradient(范围,颜色值1,颜色值2....)
径向渐变
        background:radial-gradient(原心点坐标,渐变大小,颜色值1,颜色值2...);
重复渐变: 
        background:repeating-radial-gradient(原心点坐标,渐变大小,颜色值1,颜色值2...);

过渡:

    transition:过渡属性 过渡时间 延迟时间 动画类型;
    transition-property:过渡属性;
    transition-duration:过渡时间;
    transition-delay:延迟时间;
    transition-timing-function:过渡动画类型;
        linear 匀速运动
        ease 减速运动
        ease-in 慢慢加速
        ease-out 慢慢减速
        ease-in-out 先加速,后减速
        贝塞尔曲线

2D:

transform:功能函数;
        功能函数:
            位移:
                translateX()
                translateY()
                translate(x)
                translate(x,y)
                【注】可以为负数，为相反反向

            缩放:
                scaleX()
                scaleY()
                scale(xy)
                scale(x,y)
                【注】可以为负数，为相反反向
                    1 是默认大小
                    绝对值比1大,放大
                    绝对值比1小,缩小

            倾斜:
                skewX()
                skewY()
                skew(x)
                skew(x,y)

            旋转:
                rotateX()
                rotateY()
                rotate(z)
				
             问题: 先旋转后位移   和  先位移后旋转效果一样吗
               答：效果不一样,因为先旋转改变了位移的方向
			
             transform-origin:水平  垂直; 变形基点
                    px
                    left center  right
                    top  center  bottom