CSS3中Transform动画属性用法详解

2020-05-11 18:31:42易采站长站整理

            margin: 0;   
            padding: 0;   
        }   
        #container{   
            width: 800px;    
            height: 150px;    
            border: 1px solid blue;    
            margin: 20px auto;    
            padding: 20px 20px;   
        }   
        #div1 ,#div2, #div3, #div4{   
            height: 100px;    
            width: 100px;    
            border: 1px dashed red;   
            display: inline-block;   
        }   
        #div1 div{   
            height: 100px;   
            width: 100px;    
            background: #63F7ED;    
            transform:translate(20px,10px);         /* W3C标准 */   
            -ms-transform:translate(20px,10px);     /* IE 9 */   
            -moz-transform:translate(20px,10px);    /* Firefox */   
            -webkit-transform:translate(20px,10px); /* Safari 和 Chrome */   
            -o-transform:translate(20px,10px);      /* Opera */   
            transform-origin:left top;          /* W3C标准 */