css 各浏览器里的不同

IE (IE内核)    火狐 (Gecko) 谷歌(webkit)     opear(Preato)

 

.div1{
column-count:3;
-webkit-column-count:3;
column-gap:50px;
-webkit-column-gap:50px;
column-rule:5px outset #ff0000;
-webkit-column-rule:5px outset #ff0000;
}
.div11{
width:100px;
height:100px;
transition:width 2s,height 2s,transform 2s;
-webkit-transition:width 2s,height 2s,transform 2s;
-ms-transition:width 2s,height 2s,transform 2s;
-o-transition:width 2s,height 2s,transform 2s;
-moz-transition:width 2s,height 2s,transform 2s;
transition-delay:3s;
}
.container{
column-width:150px;
-webkit-column-width:150px;
column-gap:10px;
-webkit-column-gap:10px;
}

.div11:hover{
width:200px;
height:200px;
transform:rotate(250deg);
-webkit-transform:rotate(250deg);
}

div{
width:200px;
height:100px;

}
.div2-{
background-color:green;
transform:translate(100px,100px);
-webkit-transform;translate(100px,100px);/*这个safari chrome*/
-ms-transform:translate(200px,100px);/*IE*/
-o-transform:translate(200px,100px);/*opera*/
-moz-transform:translate(200px,100px);/*firefox*/
}
.div2--{
transform:rotate(100deg);px
-webkit-transform;rotate(100deg);/*这个safari chrome*/
-ms-transform:rotate(200deg);/*IE*/
-o-transform:rotate(100deg);/*opera*/
-moz-transform:rotate(100deg);/*firefox*/

}
.div2---{

transform:scale(1,2);
-webkit-transform;scale(1,2);/*这个safari chrome*/
-ms-transform:scale(2;,1);/*IE*/
-o-transform:scale(1,2);/*opera*/
-moz-transform:scale(1,2);/*firefox*/
}
.div2-----{

transform:skew(50deg,60deg);
-webkit-transform;skew(50deg,60deg);/*这个safari chrome*/
-ms-transform:skew(50deg,60deg);/*IE*/
-o-transform:skew(50deg,60deg);/*opera*/
-moz-transform:skew(50deg,60deg);/*firefox*/
}
.div2{

transform:rotateX(50deg);
-webkit-transform;rotateX(50deg);/*这个safari chrome*/
-ms-transform:rotateX(50deg);/*IE*/
-o-transform:rotateX(50deg);/*opera*/
-moz-transform:rotateX(50deg);/*firefox*/
}
posted @ 2016-07-09 11:48  joycefan  阅读(326)  评论(4编辑  收藏  举报