翻译/旋转后重置CSS转换原点 [英] Reset CSS transform origin after translation / rotation
问题描述
在CSS中转换元素后，转换原点保留在原始位置。在这种特殊情况下，我希望转换原点在所有转换过程中相对于元素保持居中居中。我想让原点按照正在转换的元素进行排序。我知道 transform-origin 属性，但似乎需要我每次都手动移动原点和元素......即使我可以在JavaScript中这样做，它看起来非常数学沉重，不直观。
下面的动画除了最后一个宽旋转外，其行为与预期完全相同。我希望最后一次旋转围绕实际元素的中心旋转。不是它的原始位置。如何将转换原点移回到此元素的中心。想法？
html，body {height：100％;保证金：0; padding：0;} body {display：flex; justify-content：center; align-items：center; background-color：#fdfdfd;颜色：#aaa; font-family：Arial，'sans-serif'; font-size：0.8rem; letter-spacing：0.1rem;}。tri {width：0;身高：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;} < pre class =snippet-code-html lang-html prettyprint-override> < head> <风格> .tri-bx {animation-name：start;动画持续时间：5秒; 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>
重置变换原点，正如您所说的那样< ，以前的不变，你会得到你想要的。
（作为一个方面，在一个片段中，你不需要body中的元素HTML和样式更好地放置在CSS编辑器中。）
。 tri-bx {animation-name：start;动画持续时间：5秒; 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％;保证金：0; padding：0;} body {display：flex; justify-content：center; align-items：center; background-color：#fdfdfd;颜色：#aaa; font-family：Arial，'sans-serif'; font-size：0.8rem; letter-spacing：0.1rem;}。tri {width：0;身高：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;} < pre class =snippet-code-html lang-html prettyprint-override> < div class =tri-bx> < div class =tri>< / div>< / div>
After translating an element in CSS it's transformation origin stays in it's original location. In this particular case I want the transformation origin to stay centered relative to the element during all transforms. I want the origin to sort of follow the element being transformed. I know about the transform-origin property but that seems to require me to manually move the origin with the element each time...And even if I could do that in JavaScript, it seems very math heavy and not intuitive.
The animation below behaves exactly as intended except for the last wide rotation. I want that last rotation to revolve around the center of the actual element. Not it's original location. How can I move the transform origin back to the center of this element. Ideas?
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>
Resetting the transform origin, as you say is hard
However, you can keep adding transforms on the right side, with the previous ones unchanged, and you'll get what you want.
(As a side note, in a snippet you don't need the body element in the HTML, and the styles are better placed in the CSS editor.)
.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>
这篇关于翻译/旋转后重置CSS转换原点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
