想要的旋转效果：
<!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代码
.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设置了，transition效果却先按中心旋转2s后再对准的基点，如下：
其并没有按所想的以设置的基点为旋转点旋转。
头疼了许久，最终发现问题在transition身上，将其指定transform的过渡时间为2s即可:
transition:transform 2s;
扫一扫
1235
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
