在固定轴上旋转元素
Rotate an element an a fixed axis
有什么方法可以在 CSS/JS 或 GSAP 中实现这样的目标?
一个简单的CSS例子
div {
height: 100px;
width: 100px;
position: relative;
background: blue;
border-radius: 10px;
}
span {
height: 10px;
width: 50%;
left: 50%;
top: calc(50% - 5px);
position: absolute;
background: white;
border-radius: 10em;
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: left center;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div>
<span></span>
</div>
实现此目的的一种方法是创建一个使用 transform: rotateZ
的旋转关键帧。确保将 transform-origin
设置为 left center
,以便“针”div 围绕其左侧部分(而不是围绕其中心)旋转。
.needle {
width: 100px;
height: 20px;
background-color: lightgray;
position: absolute;
left: 50%;
top: calc(50% - 10px);
border-radius: 40px;
transform-origin: left center;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
.container {
width: 200px;
height: 200px;
background-color: darkblue;
position: relative;
border-radius: 10px;
}
<div class="container">
<div class="needle"></div>
</div>
有什么方法可以在 CSS/JS 或 GSAP 中实现这样的目标?
一个简单的CSS例子
div {
height: 100px;
width: 100px;
position: relative;
background: blue;
border-radius: 10px;
}
span {
height: 10px;
width: 50%;
left: 50%;
top: calc(50% - 5px);
position: absolute;
background: white;
border-radius: 10em;
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
transform-origin: left center;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div>
<span></span>
</div>
实现此目的的一种方法是创建一个使用 transform: rotateZ
的旋转关键帧。确保将 transform-origin
设置为 left center
,以便“针”div 围绕其左侧部分(而不是围绕其中心)旋转。
.needle {
width: 100px;
height: 20px;
background-color: lightgray;
position: absolute;
left: 50%;
top: calc(50% - 10px);
border-radius: 40px;
transform-origin: left center;
animation: rotation 2s linear infinite;
}
@keyframes rotation {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
.container {
width: 200px;
height: 200px;
background-color: darkblue;
position: relative;
border-radius: 10px;
}
<div class="container">
<div class="needle"></div>
</div>