430day(旋转)

最新推荐文章于 2025-04-19 16:20:04 发布

原创最新推荐文章于 2025-04-19 16:20:04 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

《2018年12月8日》【连续430天】

标题：旋转；

内容：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			width:150px;
			height: 150px;
			border: 1px solid #ccc;
			margin: 300px auto;
			position: relative;
		}
		div img {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			transition: all 1s;
			transform-origin: top right;
		}
		div:hover img:first-child{
			transform: rotate(90deg);
		}
		div:hover img:nth-child(2){
			transform: rotate(180deg);
		}
		div:hover img:nth-child(3){
			transform: rotate(270deg);
		}
		div:hover img:nth-child(4){
			transform: rotate(360deg);
		}
		
	</style>
</head>
<body>
	<div>
		<img src="images/2.png" alt="">
		<img src="images/4.png" alt="">
		<img src="images/6.png" alt="">
		<img src="images/3.png" alt="">
	</div>
</body>
</html>