css3边框

boder-radius

两个参数：左上右下， 右上左下（具体数值就是远的半径）

四个参数：左上 右上 右下 左下 （顺时针）

box-shadow

参数：水平距离  垂直距离  模糊边框  模糊半径  颜色 是否在边界内部（inset/默认为outset）

css3背景

background-size：背景大小

background-size : contain;

background-size :　cover;

background-size : 100% 100%;

background-orgin : 背景位置

background-orgin : border-box;

background-orgin : padding-box;

background-orgin : content-box;

这里我都给了padding值，比较一下，可以得出：

值为border-box时，border在content中；

值为content-box时，padding在content中；

值为padding-box时，padding在border和content中间。

css3变形

transform：

translate( ) 位移移动

transform的translate位移操作
            跟相对定位类似，不脱离文档流，而且也不影响其他元素的位置
            translate位移
                两个参数 : x , y, z
                translateX()   translateY() translateZ();

css

.stage {
                width: 300px;
                height: 300px;
                margin: 20px;
                float: left;
                position:relative;
                background: url(img/bg.jpg);
                perspective: 800px;
                /*视距, perspective 给要变形元素的父元素加上这个属性
                 * 眼睛跟屏幕的距离*/

               这里给s2 img2 在z轴上移动了400px，所以给一个800px的视距能有一个远近的效果
            }
            .stage .container{
                position: absolute;
                left: 50%;
                top:50%;
                margin-left: -35px;
                margin-top: -50px;
            }
       
            .stage .container img{
                position: absolute;
                left:0px;
                top:0px;
            }
           
            .stage .container img:nth-child(1){
                opacity: 0.5;
            }
           
           
            .s1 .container img:nth-child(2){
                transform: translate(100px,100px);
                /*transform: translateY(-100px);*/
                /*transform: translateX(-100px);*/
            }
           
            .s2 .container img:nth-child(2){
                transform: translateZ(400px); /*视距感觉图片变大*/
                /*transform: translateZ(-400px);*//*视距感觉图片变小*/
            }       

html

<div class="stage s1">
            <div class="container">
                <img src="http://www.mamicode.com/img/cardKingClub.png" width="70" height="100" />
                <img src="http://www.mamicode.com/img/cardKingClub.png" width="70" height="100" />
            </div>

</div>
<div class="stage s2">
            <div class="container">
                <img src="http://www.mamicode.com/img/cardKingClub.png" width="70" height="100" />
                <img src="http://www.mamicode.com/img/cardKingClub.png" width="70" height="100" />
            </div>

</div>

scale( ) 大小缩放

这个原理和背景图片大小是一样的，比较好理解。

rotate( ) 旋转

transform: rotateX(40deg);

transform: rotateY(-40deg);

补充：   
               (1)如果rotate 中值是正数  就是 顺时针 旋转度数 ， 如果是负数就是逆时针旋转度数
               (2)如果 rotate(45deg) ===  rotateZ(45deg)
               (3)rotate3d(0,1,1,30deg) 标示你是否希望沿着该轴旋转，是为1，不是为0，最后一个标示旋转的角度。
               (4)默认以中心点旋转，transform-origin : 水平 垂直;  这样设置参照的中心点

skew( ) 倾斜

这玩意，没怎么见过，就动手试了一下 ：）

transform: skewX(30deg);

transform: skewY(-30deg);

transform: skew(30deg,30deg);

补：

perspective 视距 景深
perspective-origin 属性指定了观察者关注的位置
transform-style (preserve-3d) 建立3D空间
backface-visibility 隐藏背面

css3过渡

transition：

参数：属性   持续时间   延迟时间   运动形式

拆分写为：

transition-property
transition-duration
transition-delay负数的是提前执行
transition-timing-function(linear, ease, ease-in, ease-out，ease-in-out) 加速度的形式

对应的事件：

        <div id="div1">
            <div id="div2"></div>

        </div>
        <script>
            var oDiv2 = document.getElementById(‘div2‘);

            oDiv2.addEventListener(‘transitionend‘, function(ev) {
                console.log(ev);
                if(ev.propertyName =="transform"){
                    oDiv2.style.background = "yellow";
                }
            }, false);

            //transitionend : 当css3过渡时间结束的时候，就触发这个事件
        </script>

css3动画

animation

animation-direction   运动执行的方式
animation-play-state 运动执行状态  pasted 和 running
animation-fill-mode  
     forwards 当动画完成以后，保持最后一个属性

     backwards 动画显示之前，应用该属性
@keyframes   有三种写法  1.from to  2个关键字

                                       2.10% 50% 100%   多个百分比值来执行固定时间的动画

                                       3.animation: steps()   针对整合好的spirt图通过固定频率形成动画

对应的事件：

<div id="div1"></div>

<script>
    var oDiv = document.getElementById(‘div1‘);

    oDiv.addEventListener(‘animationstart‘, function() {
        console.log("动画开始");
    }, false);
    oDiv.addEventListener(‘animationend‘, function() {
        console.log("动画结束");
    }, false);
    oDiv.addEventListener(‘animationiteration‘, function(ev) {
        console.log(ev.elapsedTime); //总时间（每一次时间的累加和）
    }, false);

    //animationstart : 当css3的animation开始的时候触发的事件
    //animationend : 当css3的animation结束的时候触发的事件
    //animationiteration : 当css3的animation多次的时候触发的事件（每走一次就触发一下） 总次数 是 n-1  ， n 是动画执行的次数
</script>

动画实例：

不会gif，先用静态的代替一下--

html

* {
            margin: 0;
            padding: 0;
        }
       
        ul {
            margin: 100px;
        }
       
        li {
            list-style: none;
        }
       
        li {
            width: 5px;
            height: 30px;
            background: green;
            float: left;
            margin-right: 5px;
            animation: runLine 2s infinite linear;
        }
       
        @keyframes runLine{
            0%{
                transform: scaleY)(1);
            }
            50%{
                transform: scaleY(0.5);
            }
            100%{
                transform: scaleY(1);
            }
        }
        ul li:nth-of-type(1){
            animation-delay: 0;
        }
        ul li:nth-of-type(2){
            animation-delay: -.2s;
        }
        ul li:nth-of-type(3){
            animation-delay: -.4s;
        }
        ul li:nth-of-type(4){
            animation-delay: -.6s;
        }
        ul li:nth-of-type(5){
            animation-delay: -.8s;
        }
        ul li:nth-of-type(6){
            animation-delay: -1s;
        }

html

<ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>

</ul>

最后放rotate坐标轴和skew坐标轴、还有transition的运动形式吧。

css3整理（二）