css实现文字/图标旋转90度/水平翻转/垂直翻转

一 css实现图片旋转90度

1
2
3
4
5
6

.icon{

-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);

}

二水平翻转

1
2
3
4
5
6
7
8
9

.icon {
color: #f64e78;
font-size: 20px;
display: inline-block;
-moz-transform:scaleX(-1);
-webkit-transform:scaleX(-1);
-o-transform:scaleX(-1);
transform:scaleX(-1);
}

三垂直翻转

1
2
3
4
5
6
7
8
9

.icon {
color: #f64e78;
font-size: 20px;
display: inline-block;
-moz-transform:scaleY(-1);
-webkit-transform:scaleY(-1);
-o-transform:scaleY(-1);
transform:scaleY(-1)
}

四效果图