CSS3中Transform动画属性用法详解

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

        #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 */   
        }   
        #div2{margin-left: 50px;}   
        #div2 div{   
            height: 100px;   
            width: 100px;    
            background: #63F7ED;   
            transform:rotate(45deg);        /* W3C标准 */   
            -ms-transform:rotate(45deg);    /* IE 9 */   
            -moz-transform:rotate(45deg);   /* Firefox */