089图旋转 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转8图</title>
	</head>
	<style>
		*{margin: 0;padding: 0;}
		body{background: grey;}
		div.transition{
			width: 250px;
			height: 165px;
			margin: 200px auto;
			position: relative;
		}
		div.transition img{
			width: 250px;
			height: 165px;
			position: absolute;
			left: 0;
			top: 0;
			border: 3px solid white;
			transition: all 0.5s;
			transform: translate(0,0) rotate(0);
		}
		.transition:hover img:nth-child(1){
			transform: translate(101%,40%) rotate(-20deg) scale(0.8,0.8);
		}
		.transition:hover img:nth-child(2){
			transform: translate(-58%,130%) rotate(-20deg) scale(0.8,0.8);
		}
		.transition:hover img:nth-child(3){
			transform: translate(22%,85%) rotate(-20deg) scale(0.8,0.8);
		}
		.transition:hover img:nth-child(4){
			transform: translate(58%,-125%) rotate(-20deg) scale(0.8,0.8);
		}
		.transition:hover img:nth-child(5){
			transform: translate(-101%,-40%) rotate(-20deg) scale(0.8,0.8);
		}
		.transition:hover img:nth-child(6){
			transform: translate(-22%,-82%) rotate(-20deg) scale(0.8,0.8);
		}
		.transition:hover img:nth-child(7){
			transform: translate(-80%,43%) rotate(-20deg) scale(0.8,0.8);
		}
		.transition:hover img:nth-child(8){
			transform: translate(80%,-43%) rotate(-20deg) scale(0.8,0.8);
		}
		.transition:hover img:nth-child(9){
		transform: translate(0,0) rotate(-20deg)  scale(1.1,1.1);
		}
		
	</style>
	<body>
		<div class="transition">
			<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" />
			<img src="img/6.jpg" />
			<img src="img/7.jpg" />
			<img src="img/8.jpg" />
			<img src="img/9.jpg" />
		</div>
	</body>
</html>

　　

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