CSS3 2D转换、过渡属性、CSS3 3D转换、自定义动画讲解

1.translate（） 移动

transform:translate(300px,200px); 
transform:translateX(200px);          水平向右偏移
transform:translateY(300px);          垂直向下偏移

2.rotate（） 旋转

transform:rotate(50deg);           正值：顺时针旋转（一个值）

3.scale（X,Y） 缩放：0~1 缩小，>1 放大。

transform:scale(2);                水平和垂直方向同时放大2倍，无单位

4.skew（） 倾斜 / 扭曲

transform:skew(30deg,45deg);       水平：沿x轴转，垂直：沿y轴转

5.transform-origin 参考点

transform-origin:right bottom;     以右下角的点为参考点旋转
transform-origin:80% 50%;          以某个点为参考点旋转

6.transition 过渡效果

transition:transform 1s linear;    在1s时间内匀速移动

过渡属性：

transition-property 规定应用过渡的 CSS 属性的名称，即进行过渡的对象；
transition-duration 定义过渡效果花费的时间；
transition-timing-function 规定过渡频率，默认是 “ease”；

属性值：linear 匀速过渡；ease 慢-快-慢；ease-in 开始慢；ease-out 结束慢；ease-in-out 开始慢，结束慢。

transition-delay 规定过渡效果何时开始，即延时，默认是 0。

transion:all 1s linear 1s;
transion:1s;  （简写）

CSS3 3D转换：

rotateX（deg）沿x轴旋转，rotateY（deg）沿y轴旋转。

自定义动画：

@keyframes chbg（自定义名称）{
          from {background: red;}
          to {background: yellow;}
}                                   /*从起始到结束均匀变化*/

@keyframes chbg{
          0% {background: green;}
          25% {background: yellow;}
          50% {background: pink;}
          100% {background: blue;}
}  

调用： animation：动画名称 执行时间 动画频率 延迟 循环 第二遍是否反向 /以反向开始（eg：从右往左走）

p:hover{
     animation: chbg 36s linear 1s infinite alternate/reverse;
}

多媒体查询：（多套CSS）

（1）html：

（2） html：

css：

@media all and (max-width:768px){
    body{
        background: yellowgreen;
    }
}
@media all and (min-width:769px) and (max-width:992px){
    body{
        background: pink;
    }
}
@media all and (min-width:993px) {
    body {
        background: blue;
    }
}

自定义属性 / 扩展属性：“data-”开头

提取自定义属性：attr(data-)

CSS3 弹性盒子

具体语法见 ： W3Cschool CSS3弹性盒子