当前位置:  开发笔记 > 编程语言 > 正文

跨浏览器方式通过Javascript/CSS翻转html /图像?

如何解决《跨浏览器方式通过Javascript/CSS翻转html/图像?》经验,为你挑选了1个好方法。

是否有图书馆/简单的方式来翻转图像?

像这样翻转图像:

AABBCC      CCBBAA
AABBCC  ->  CCBBAA

我不是在寻找动画,只是翻转图像.

我已经google到没有avial,只发现了一个在MozillaZine上使用SVG的复杂版本,我不相信它会跨浏览器工作.



1> Eli Grey..:

以下CSS将适用于支持CSS转换的IE和现代浏览器.我包括了一个垂直翻转类,以防你也想要使用它.

.flip-horizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph;
}
.flip-vertical {
    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);
    -ms-filter: flipv; /*IE*/
    filter: flipv;
}


请不要忘记`-o-transform:scale(-1,0);`和`-o-transform:scale(0,-1);`http://dev.opera.com/articles/view/ CSS3跃迁和-2D-变换/
不需要`-ms-filter:"FlipH"`?
推荐阅读
和谐啄木鸟
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有