CSS3渐变及2D转换

CSS3渐变及2D转换

持续更新哦…

1、css3渐变

概念:

CSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平
稳的过渡。以前，你必须使用图像来实现这些效果，现在通过使用
CSS3的渐变(gradients)即可实现。此外，渐变效果的元素在放大时
看起来效果更好，因为渐变(gradient)是由浏览器生成的。

css3渐变:在两个或多个颜色之间的平稳过渡
渐变属性是:background-image:background:线性渐变:由一个颜色到另一个颜色的平稳过渡
    linear-gradient(方位,颜色1,颜色2)方位:left right top bottom deg(角度可以为负数)
    to left top(表示去左上进行渐变)repeating-linear-gradient()重复渐变
径向渐变:    颜色由一个点向四周扩散的效果
    background:radial-gradient(起始坐标,渐变形状,渐变大小,颜色1,颜色2)起始坐标:left right top bottom center,默认是中间
    渐变形状:ellipse椭圆,如果元素是正方形,也将显示正圆
    circle正圆
    渐变大小:closest-side:最近边
        farthest-side:最远边
        closest-corner:最近角
        fathest-corner:最远角

2、过渡（重点）

过渡:可以让css属性值在一定事件区间内平滑的过渡效果
transition:过渡属性 时间 延迟时间 动画类型
    过渡属性:all 所有属性
        具体属性
        transition-property:过渡属性；
        transition-duration:过渡时间；
        transition-delay:延迟时间；
        transition-timing-function:过渡动画类型；

    时间,延迟时间单位为:s
    动画类型:linear:匀速运动
        ease:逐渐慢下来
        ease-in:加速
        ease-out 减速
        ease-in-out 先加速后减速
        贝塞尔曲线
        steps(数字) 逐帧动画

3、2D平面效果（重点）

transform:变化属性

​ 功能函数:

​ 位移:

​ translateX()

​ translateY()

​ translate(x,y)

可以为负数

缩放:

scaleX()scaleY()scale(xy)scale(x,y)注意:
1 默认大小
0 缩小到消失
0~1 缩小
大于1 放大
负数则反向
  /* 缩放 */transform:scale(2);transform:scaleX(1.5);transform:scaleY(2.5);transform:scale(2.5,2.5);

旋转:

rotateX()rotateY()rotate(z)/* 旋转 z轴 */transform:rotate(90deg);/* 高度变小 */transform:rotateX(70deg);/* 宽度变小 */transform:rotateY(70deg);

问题:先旋转,后位移和先位移,后旋转,效果一样吗?

不一样,因为先旋转改变了位移的方向

transform: translate(100px) rotate(40deg);

​ transform: rotate(40deg) translate(100px);

倾斜

skewX()skewY()skew(x)skew(x,y)/* 倾斜x轴 */transform:skew(20deg);/* x,y */transform:skew(20deg,40deg);transform:skewX(30deg);transform:skewY(30deg);

变形原点

该属性只有在设置了transform属性的时候起作用

​ transform-origin: center bottom;所有方位名词都可以,数值,百分比也可以