极客观点
项目管理
HarmonyOS
我在.avatar上设置transform-origin任何值都不好使，不会影响.avatar转动，
我觉得spin是基于transform-origin：0 0；才有现在的旋转效果。
但是我发现不设置transform-origin或者设置其他的值，都不会影响现在的效果，这是为啥？
代码在codepen
https://codepen.io/sdaiber/pe...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<style>
@keyframes spin {
from {
transform: translate(50%, 150px) rotate(0turn) translate(-50%, -150px) translate(50%, 50%) rotate(1turn) translate(-50%, -50%)
}
to {
transform: translate(50%, 150px) rotate(1turn) translate(-50%, -150px) translate(50%, 50%) rotate(0turn) translate(-50%, -50%);
}
}
@keyframes spin-reverse {
from {
transform: translate(50%, 50%) rotate(1turn) translate(-50%, -50%);
}
to {
transform: translate(50%, 50%) rotate(0turn) translate(-50%, -50%);
}
}
.avatar {
animation: spin 3s infinite linear;
transform-origin:100% 100%;
}
.avatar>img {
animation: spin-reversee 3s infinite linear;
}
/* Anything below this is just styling */
.avatar {
width: 50px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
}
.avatar>img {
display: block;
width: inherit;
}
.path {
width: 300px;
height: 300px;
padding: 20px;
border-radius: 50%;
background: #fb3;
}
</style>
</head>
<body>
<div class="path">
<div class="avatar">
<img src="http://lea.verou.me/book/adamcatlace.jpg" />
</div>
</div>
<script>
</script>
</body>
</html>