在 CSS 中翻译元素后，其变换原点仍保留在其原始位置。在这种特殊情况下，我希望变换原点为stay在所有变换期间相对于元素居中。我希望起源是这样的follow被变换的元素。我知道关于transform-origin属性，但这似乎需要我每次手动移动元素的原点......即使我可以在 JavaScript 中做到这一点，它似乎非常数学繁重并且不直观。
除了最后一个之外，下面的动画的行为完全符合预期wide回转。我希望最后一次旋转围绕实际元素的中心旋转。不是原来的位置。我怎样才能移动transform原点回到该元素的中心。有想法吗？
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #fdfdfd;
color: #aaa;
font-family: Arial, 'sans-serif';
font-size: 0.8rem;
letter-spacing: 0.1rem;
}
.tri {
width: 0;
height: 0;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-bottom: 1rem solid #555;
transform: scaleY( 2 );
border-radius: 50%;
}
.status, .instr {
position: absolute;
}
.status {
top: 0;
}
.instr {
bottom: 0;
}
<head>
<style>
.tri-bx {
animation-name: start;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes start {
0% {
transform: rotate( 0deg );
}
33% {
transform: rotate( 315deg );
}
66% {
transform: rotate( 315deg ) translate( 0, -5rem );
}
100% {
transform: rotate( 720deg ) translate( 0, -5rem );
}
}
</style>
</head>
<body>
<div class="tri-bx">
<div class="tri"></div>
</div>
</body>
正如你所说，重置变换原点hard
但是，您可以继续在右侧添加变换，而之前的变换不变，您将得到您想要的。
（顺便说一句，在代码片段中，您不需要 HTML 中的 body 元素，并且样式最好放置在 CSS 编辑器中。）
.tri-bx {
animation-name: start;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes start {
0% {
transform: rotate( 0deg);
}
33% {
transform: rotate( 315deg);
}
66% {
transform: rotate( 315deg) translate( 0, -5rem) rotate(0deg);
}
100% {
transform: rotate( 315deg) translate( 0, -5rem) rotate( 405deg);
}
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #fdfdfd;
color: #aaa;
font-family: Arial, 'sans-serif';
font-size: 0.8rem;
letter-spacing: 0.1rem;
}
.tri {
width: 0;
height: 0;
border-left: 1rem solid transparent;
border-right: 1rem solid transparent;
border-bottom: 1rem solid #555;
transform: scaleY( 2);
border-radius: 50%;
}
.status,
.instr {
position: absolute;
}
.status {
top: 0;
}
.instr {
bottom: 0;
}
<div class="tri-bx">
<div class="tri"></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
