CSS实现旋转标签

最新推荐文章于 2024-05-17 10:26:44 发布

Monarch_lin

最新推荐文章于 2024-05-17 10:26:44 发布

阅读量1.9k

点赞数

分类专栏： JavaScript 文章标签： web前端

本文链接：https://blog.csdn.net/Monarch_lin/article/details/24133719

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

最近在写移动端页面时发现页面左上角的一个旋转的标签，当时考虑到兼容性问题就没有用css3的方法去实现，直接截取了图片。之后发现原来ie的滤镜也可以实现这样的效果，可以实现兼容，于是网上查找资料后实现了一下：

实现效果如下：

实现代码如下：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	#sources{
		background-color: #333;
		color: #fff;
		font: bold 14px/28px georgia,sans-serif;
		text-align: center;
		width: 200px;
		height: 28px;
		display: block;
	}
	/*主要样式*/
	#sources{
		position: fixed; /*ie6不支持*/
		top: 0;
		left: 0;

		_position: absolute; /*ie6 hack*/
		top: -20px\9;/*ie6 hack*/
		left: -20px\9;/*ie6 hack*/
		
		/*transform 指定平移及旋转角度，具体查看css手册*/
		-moz-transform: translate(-40px,45px) rotate(-45deg);
		-webkit-transform: translate(-40px,45px) rotate(-45deg);
		-o-transform: translate(-40px,45px) rotate(-45deg);
		transform: translate(-40px,45px) rotate(-45deg);

		-moz-box-shadow: 0 0 5px rgba(0,0,0,.5),inset 0 0 2px #fff;
		-webkit-box-shadow: 0 0 5px rgba(0,0,0,.5),inset 0 0 2px #fff; /*逗号分隔表示多组效果*/
		        box-shadow: 0 0 5px rgba(0,0,0,.5),inset 0 0 2px #fff;
				text-shadow: 1px 1px 1px rgba(0,0,0,.1);
		/*ie滤镜-矩阵*/
		filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=.7,M12=0.6,M21=-.7,M22=0.6);
		}
		</style>
</head>

<body>
	<section>
		<a id="sources" href="#" title="css 旋转效果">CSS旋转效果</a>
	</section>
</body>
</html>