利用css使得img图片水平或垂直翻转

2020-12-31  本文已影响0人  江南极客

水平翻转:

<img src="" alt="" style="transform: rotateY(180deg); ">或

<img src="" alt="" style="transform:scaleX(-1); ">

垂直翻转:

<img src="" alt="" style="transform: rotateX(180deg);">或

<img src="" alt="" style="transform:scaleY(-1);">


兼容浏览器写法:

水平翻转

<img src="xxx" alt="" style="-moz-transform:scaleX(-1);    

-webkit-transform:scaleX(-1);   

 -o-transform:scaleX(-1);  

  transform:scaleX(-1);  

filter:FlipH;">

垂直翻转:

<img src="xxx" alt="" style="  -moz-transform:scaleY(-1);

  -webkit-transform:scaleY(-1);

  -o-transform:scaleY(-1);

  transform:scaleY(-1);

  filter:FlipV;">

filter:FlipH和filter:FlipX是兼容IE的写法


-moz代表firefox浏览器私有属性;

-ms代表IE浏览器私有属性;

-webkit代表chrome、safari私有属性;

-o代表Opera私有属性。

上一篇 下一篇

猜你喜欢

热点阅读