095图旋转 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转9特效</title>
		<style>
			*{margin: 0;padding: 0;}
			
			body{background: grey;}
			
			div.d2{
				width: 250px;
				height: 165px;
				margin: 200px auto;
				position: relative;
			}
			
			div.d2 img{
				width: 250px;
				height: 165px;
				position: absolute;
				left: 0;top: 0;
				border: 5px solid white;
				transition: all 0.5s;
			}
			
			.d2:hover img:first-child{
				transform: translate(-70%,0) rotate(-20deg);
			}
			
			.d2:hover img:nth-child(2){
				transform: translate(0,70%) rotate(-20deg);
			}
			
			.d2:hover img:nth-child(3){
				transform: translate(70%,0) rotate(-20deg);
			}
			
			.d2:hover img:nth-child(4){
				transform: translate(0,-70%) rotate(-20deg);
			}
			
			.d2:hover img:nth-child(5){
				transform: scale(1.2,1.2) rotate(-20deg);
			}
		</style>
	</head>
	<body>
		<div class="d2">
			<img src="img/1.jpg" />
			<img src="img/2.jpg" />
			<img src="img/3.jpg" />
			<img src="img/4.jpg" />
			<img src="img/5.jpg" />
		</div>
	</body>
</html>

　　

posted @ 2020-11-27 08:49  卿家尘归尘  阅读(34)  评论(0)    收藏  举报