CSS transform-origin 属性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/ice_yr/article/details/100186544

transform-origin可以调整元素转换变形的原点

div {transform-origin: left top;transform: rotate(45deg);} /改变元素原点到左上角，然后进行顺时旋转45度/
是4个角可以用bottom right（top left）
需要精确位置可以用px像素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		img {
			margin: 100px;
			transition: all 0.6s;
			/*transform-origin: center center;  center center 水平居中垂直居中*/
			transform-origin: top left;
		}
		img:hover {
			transform: rotate(360deg);
		}
		tr {
		}
	</style>
</head>
<body>
	<img src="ad-l.png" alt="">
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div {
			width: 250px;
			height: 170px;
			border: 1px solid blue;
			margin: 200px auto;
			position: relative;
		}
		div img {
			width: 100%;
			height: 100%;	
			position: absolute;
			top: 0;
			left: 0;
			/*z-index: 0;*/
			transition: all 0.6s;
			transform-origin: top right; 
		}
		div:hover img:nth-child(1) {  /*鼠标经过div 第一张图片旋转*/
			transform: rotate(60deg);
		}
		div:hover img:nth-child(2) {  
			transform: rotate(120deg);
		}
		div:hover img:nth-child(3) {  
			transform: rotate(180deg);
		}
		div:hover img:nth-child(4) {  
			transform: rotate(240deg);
		}
		div:hover img:nth-child(5) {  
			transform: rotate(300deg);
		}
		div:hover img:nth-child(6) {  
			transform: rotate(360deg);
		}
	</style>
</head>
<body>
	<div>
	<img src="ad-l.png" alt="">
	<img src="ad-l.png" alt="">
	<img src="ad-l.png" alt="">
	<img src="ad-l.png" alt="">
	<img src="ad-l.png" alt="">
	<img src="ad-l.png" alt="">
	</div>
</body>
</html>