CSS3之transform-origin属性案例

最新推荐文章于 2024-08-25 20:52:11 发布

Ron韦斯莱

最新推荐文章于 2024-08-25 20:52:11 发布

阅读量388

点赞数

本文链接：https://blog.csdn.net/qq_43537987/article/details/89402480

版权

案例：鼠标经过时，扑克牌转动到各自角度。
目的：掌握transform-origin属性的使用。
效果展示：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转中心</title>
	<style>
		#container {
				width: 200px;
				height: 180px;
				margin: 300px auto;
				position: relative;
		}
		img {
			width: 100px;
			height: 180px;
			position: absolute;
			transition:transform 1s;
			transform-origin:top right;
		}
		#container:hover > img:nth-of-type(1){
			transform:rotate(60deg);
		}
		#container:hover > img:nth-of-type(2){
			transform:rotate(120deg);
		}
		#container:hover > img:nth-of-type(3){
			transform:rotate(180deg);
		}
		#container:hover > img:nth-of-type(4){
			transform:rotate(240deg);
		}
		#container:hover > img:nth-of-type(5){
			transform:rotate(300deg);
		}
		#container:hover > img:nth-of-type(6){
			transform:rotate(360deg);
		}
	</style>
</head>
<body>
	<div id="container">
		<img src="images/pk2.png" alt="">
		<img src="images/pk2.png" alt="">
		<img src="images/pk2.png" alt="">
		<img src="images/pk2.png" alt="">
		<img src="images/pk2.png" alt="">
		<img src="images/pk2.png" alt="">
	</div>
</body>
</html>