css3 翻转

/*水平翻转*/
.flipx {
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
filter:FlipH();
}
/*垂直翻转*/
.flipy {
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1);
filter:FlipV();
}
/*顺时针旋转90度*/
.rotate90 {
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
/*顺时针旋转180度*/
.rotate180 {
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
/*顺时针旋转270度*/
.rotate270 {
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}

 供自己用时翻阅  ^_^

摘自:http://www.cnblogs.com/f2er/p/transform.html

posted @ 2018-09-21 11:09  king_94boy  阅读(189)  评论(0编辑  收藏  举报