思考：【滤镜仅在IE有效！】在style使用filter(滤镜)设置水平翻转(flipH)和竖直翻转(flipV)

来源：互联网发布：马尔科夫转移概率知乎编辑：程序博客网时间：2024/06/04 23:25

在CSS中，有滤镜属性filter，可以将某一个标签内的内容按水平方向翻转或者按竖直方向翻转。

【滤镜仅在IE有效！】

基本实现如下：

</pre><pre name="code" class="html"><!DOCTYPE html><html><head><meta charset="utf-8"><title>滤镜实现翻转</title><style type="text/css">div{position: absolute;top: 100px;left: 100px;filter: flipV;}img {position: absolute;top: 120px;left: 100px;}</style></head><body><h3>实现翻转</h3><hr><br><div style="color:blue; font-size:18px;">实现文字翻转</div><br><img src="test.jpg" style="width:100px; height:100px; filter:flipV"><!-- 实现图片翻转 --></body></html>

另外，也可以使用翻转函数，设置翻转度数为180度，以达到效果。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>滤镜实现翻转</title><style type="text/css">div{position: absolute;top: 100px;left: 100px;transform:rotate(-180deg);}img {position: absolute;0transform: rotate(-180deg);top: 120px;left: 100px;}</style></head><body><h3>实现翻转</h3><hr><br><div style="color:blue; font-size:18px;">实现文字翻转</div><br><img src="test.jpg" style="width:100px; height:100px; filter:flipV"><!-- 实现图片翻转 --></body></html>

0 0