css3实现图片旋转代码教程

css3实现图片旋转代码教程

一 css实现图片旋转90度

1. .icon{
   
2.   -moz-transform:rotate(-90deg);
   
3.   -webkit-transform:rotate(-90deg);
   
4. }

复制代码

二 水平翻转

1. .icon {
   
2.     color: #f64e78;
   
3.     font-size: 20px;
   
4.     display: inline-block;
   
5.     -moz-transform:scaleX(-1);
   
6.     -webkit-transform:scaleX(-1);
   
7.     -o-transform:scaleX(-1);
   
8.     transform:scaleX(-1);
   
9. }

复制代码

三 垂直翻转

1. .icon {
   
2.     color: #f64e78;
   
3.     font-size: 20px;
   
4.     display: inline-block;
   
5.     -moz-transform:scaleY(-1);
   
6.     -webkit-transform:scaleY(-1);
   
7.     -o-transform:scaleY(-1);
   
8.     transform:scaleY(-1)
   
9. }

复制代码