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

水平翻转:

<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私有属性。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1 CSS属性 1.1 滤镜 1.1.1 blur属性 1.1.1.1 代码示例 CSS代码: .blur { ...
    Kevin_Junbaozi阅读 750评论 1 4
  • Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭...
    hzrWeber阅读 22,176评论 0 19
  • 链接:http://www.w3cplus.com/content/css3-transformTransform...
    青春前行阅读 495评论 0 0
  • CSS转换 CSS3 Transform(让元素在一个坐标系统中变形,可移动、旋转和缩放元素)transform ...
    Leophen阅读 925评论 0 1
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,574评论 16 22