我试图翻转一个图像显示它4种方式:原始(无变化),水平翻转,垂直翻转,垂直翻转.
要做到这一点,我做下面的工作,除了水平垂直的翻转,工作正常,任何想法为什么这不会工作?
我在这里做了一个JS小提琴:https://jsfiddle.net/7vg2tn83/
.img-hor { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .img-vert { -moz-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; } .img-hor-vert { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; -moz-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; }
解决方法
尝试这个:
.img-hor-vert { -moz-transform: scale(-1,-1); -o-transform: scale(-1,-1); -webkit-transform: scale(-1,-1); transform: scale(-1,-1); }
更新小提琴:https://jsfiddle.net/7vg2tn83/1/
以前没有工作,因为你超越了你的css中的变换.所以,而不是做这两个,它只是做了最后一个.如果你做了背景颜色两次,就会覆盖第一个.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。