css3中2D与3D的相关设置属性

A,B 交集
A B A类后面所有B
A>B 父类为A的B元素
A+B 所有紧挨着A的B元素

css3中图片类比较有意思的东西

    transform = skew 平面变形
                rotate 3D情况下变形
                scale 缩放与放大
                translate 元素位移
                transition-property 指定过渡或动态模拟的CSS属性
                transition-duration 指定完成过渡所需的时间
                transition-timing-function 指定过渡函数
                transition-delay 指定开始出现的延迟时间

                XXX{//动画名称
                    0%{
                            }
                    50%{
                            }
                    100%{
                            }
                }

    animation = animation-name:XXX; 动画名称
                animation-duration: 10s;动画时长
                animation-timing-function:ease;动画速率
                animation-delay:.1s;动画延迟
                animation-iteration-count:infinite;播放次数
                animation-direction:normal 播出方向

        div:hover span {
                      animation-play-state:running;
                    }//触发状态        

注：平面改变与动画的相关属性名称以及特性是一致的


例：  
        原始状体以及设置初始动画状态
        div{
            text-align: center;
            margin: 0 auto;
            width: 400px;
            height: 400px;
            background-color: orange;
            /*要改变的属性*/
            transition-property: border-radius;
            /*改变过程的时间*/
            transition-duration: 1s;
            /*改变过程中速度的快慢*/
            transition-timing-function: linear;
            /*延迟*/
            transition-delay: 0.2s;
        }
        设置动画结束状态
        div:hover{
            border-radius: 200px;