css之div旋转效果

三、css之div旋转效果

grow-rotate-l grow-rotate-r rotate5 rotate15 rotate30 rotate60 rotate90 rotate180 rotate360 rotate-5 rotate-15 rotate-30 rotate-60 rotate-90 rotate-180

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div旋转角度改变</title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			.hover-con{margin:20px auto;padding:0px 10px;width: 80%; text-align: left;border: 1px solid #000000;}
			span{
				display: inline-block;
				margin:20px;
				width: 120px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				vertical-align: top;
				background:#0069D9;
				color: #FFFFFF;
				cursor: pointer;
			}
			.ech-grow-rotate-l,.ech-grow-rotate-r, .ech-rotate5, .ech-rotate15, .ech-rotate30, .ech-rotate60, .ech-rotate90, .ech-rotate180, .ech-rotate360, .ech-rotate-5,.ech-rotate-15, .ech-rotate-30, .ech-rotate-60, .ech-rotate-90, .ech-rotate-180{
				transition: all .4s;
			}
			.ech-grow-rotate-l:hover {
			    transform: scale(1.1) rotate(4deg);
			}
			.ech-grow-rotate-r:hover {
			    transform: scale(1.1) rotate(-4deg);
			}
			.ech-rotate-5:hover {
			    transform: rotate(-5deg);
			}
			.ech-rotate-15:hover {
			    transform: rotate(-15deg);
			}
			
			.ech-rotate-30:hover {
			    transform: rotate(-30deg);
			}
			
			.ech-rotate-60:hover {
			    transform: rotate(-60deg);
			}
			
			.ech-rotate-90:hover {
			    transform: rotate(-90deg);
			}
			
			.ech-rotate-180:hover {
			    transform: rotate(-180deg);
			}
			.ech-rotate5:hover {
			    transform: rotate(5deg);
			}
			.ech-rotate15:hover {
			    transform: rotate(15deg);
			}
			
			.ech-rotate30:hover {
			    transform: rotate(30deg);
			}
			
			.ech-rotate60:hover {
			    transform: rotate(60deg);
			}
			
			.ech-rotate90:hover {
			    transform: rotate(90deg);
			}
			
			.ech-rotate180:hover {
			    transform: rotate(180deg);
			}
			
			.ech-rotate360:hover {
			    transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div class="hover-con">
			<span class="ech-grow-rotate-l">grow-rotate-l</span>
			<span class="ech-grow-rotate-r">grow-rotate-r</span>
			<span class="ech-rotate5">rotate5</span>
			<span class="ech-rotate15">rotate15</span>
			<span class="ech-rotate30">rotate30</span>
			<span class="ech-rotate60">rotate60</span>
			<span class="ech-rotate90">rotate90</span>
			<span class="ech-rotate180">rotate180</span>
			<span class="ech-rotate360">rotate360</span>
			<span class="ech-rotate-5">rotate-5</span>
			<span class="ech-rotate-15">rotate-15</span>
			<span class="ech-rotate-30">rotate-30</span>
			<span class="ech-rotate-60">rotate-60</span>
			<span class="ech-rotate-90">rotate-90</span>
			<span class="ech-rotate-180">rotate-180</span>
		</div>
	</body>
</html>

　　

posted on 2017-12-06 10:26  木之子梦之蝶  阅读(1574)  评论(0)    收藏  举报

导航