当前位置：网站首页>Invalid transform origin base point setting

Invalid transform origin base point setting

2022-04-22 06:07:00 【A hundred years of life when crazy】

Desired rotation effect ：
xz

<!DOCTYPE html>
<html>
<head>
	<title>test document</title>

	<link rel="stylesheet" type="text/css" href="./test.css">
</head>
<body>
	<div style="height: 300px;width: 300px;background-color: rgb(0,185,209);">
		<div class="q">
			
		</div>
	</div>
</body>
</html>

test.css Code  .q{
    
	position: absolute;
	height: 100px;
	width: 100px;
	background-color: red;
	transform: rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform-origin: left top;
	-webkit-transform-origin:left top;
	transition:2s;
}

transform-origin Set up ,transition The effect rotates first according to the center 2s Then align the base point , as follows ：
wtf
It does not rotate with the set base point as the rotation point as expected .
Headache for a long time , It turns out that the problem is transition On the body , Assign it to transform The transition time is 2s that will do :

transition:transform 2s;

版权声明
本文为[A hundred years of life when crazy]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204220539347529.html

边栏推荐

猜你喜欢

随机推荐