在下面的示例中，单击徽标，您会看到 - 它被翻转但也被移动
如何在不移动的情况下翻转它？
我也尝试过这个，但没有成功：
.flip{transform:scaleX(-1) translatex(-50%);}
.flip{transform:scaleX(-1) translatex(-50%);}
$('img').on('click', function(){
$(this).addClass('flip');
});.flip{transform:scaleX(-1);}
.wrap{
position:relative;
width:50%;
height:100px;
background:darkorange;
}
img{
position:absolute;
bottom:0;
width:140px;
left:50%;
transform:translatex(-50%);
}我试图制作一个旋转的徽标，但是一旦添加动画，它就会向下跳，我不明白为什么。我只是添加-webkit-animation: rotation 5s infinite linear;，根本没有调整位置。
这是它的实时版本，您可以单击初始动画后的徽标来添加旋转类。有什么想法如何让它保持在原位吗？
const EL_logo = document.querySelector(".permanent-logo");
EL_logo.addEventListener("click", () => {
EL_logo.classList.add("rotate-logo");
});.permanent-logo {
position: relative;
left: 50%;
transform: translate(-50%, -50%);
top: 70px;
width: 120px;
}
.rotate-logo {
animation: rotation 5s infinite linear;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}<div class="initial-overlay">
<div class="logo-container">
<img class="permanent-logo" src="https://i.stack.imgur.com/g2LtV.png" alt="logo">
</div>
</div>在梳理了SVG 规范以及诸如此类的指南之后，我仍然在努力理解链接变换的工作原理。
\n\n精选相关报价
\n\n\n\n\nWhen you apply the transform attribute to an SVG element, that element\n gets a "copy" of the current user coordinate system in use.
\n
And:
\n\n\n\n\nWhen transformations are chained, the most important thing to be aware\n of is that, just like with HTML element transformations, each\n transformation is applied to the coordinate system after that system\n is transformed by the previous transformations.
\n
And: …