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

最新推荐文章于 2023-10-20 14:11:55 发布

龐校長

最新推荐文章于 2023-10-20 14:11:55 发布

阅读量684

点赞数

分类专栏：学习笔记文章标签： css

本文链接：https://blog.csdn.net/fspwz/article/details/45665033

版权

学习笔记专栏收录该内容

34 篇文章 1 订阅

订阅专栏

在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;
0		transform: 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

收藏

觉得还不错? 一键收藏
0
评论
思考：【滤镜仅在IE有效！】在style使用filter(滤镜)设置水平翻转(flipH)和竖直翻转(flipV)

在CSS中，有滤纸属性filter，可以将某一个标签内的内容按水平方向翻转或者按竖直方向翻转。基本实现如下：滤镜实现翻转 div{ position: absolute; top: 100px; left: 100px; filter: flipV; } img { position: absolute; top: 120px; left:
复制链接

扫一扫

专栏目录