在一个简单的 html 页面上，我使用按钮来旋转图像。"повернуть по часовой"如果仅使用和按钮"повернуть против часовой"旋转图像，则图像正常旋转。但是如果你先按下，例如，"отразить по вертикали"然后在按钮上"повернуть по часовой"，"повернуть против часовой"图像旋转正确，但旋转动画有点失真。是否可以在不为每个转换编写逐帧动画的情况下快速解决此问题？
function disableButtons() {
document.body.classList.add('disabled');
setTimeout(() => document.body.classList.remove('disabled'), 1000);
}
rotate90.onclick = () => {
disableButtons();
let current = getComputedStyle(img).transform;
if (current == 'none') current = '';
img.style.transform = current + ' rotate(90deg)';
}
rotate270.onclick = () => {
disableButtons();
let current = getComputedStyle(img).transform;
if (current == 'none') current = '';
img.style.transform = current + ' rotate(-90deg)';
}
flipX.onclick = () => {
disableButtons();
let current = getComputedStyle(img).transform;
if (current == 'none') current = '';
img.style.transform = current + ' scaleY(-1)';
}
flipY.onclick = () => {
disableButtons();
let current = getComputedStyle(img).transform;
if (current == 'none') current = '';
img.style.transform = current + ' scaleX(-1)';
}* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
text-align: center;
}
div {
float: left;
clear: right;
width: max-content;
}
div button {
display: block;
width: 100%;
user-select: none;
margin: .3rem;
border: 2px solid #f0f;
cursor: pointer;
}
body {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2" fill="gray" stroke="none"><rect x="0" y="0" width="1" height="1"/><rect x="1" y="1" width="1" height="1"/></svg>') 16px/16px repeat;
perspective: 100vh;
}
img,
.disabled * {
pointer-events: none;
}
.disabled button {
color: #666;
background: #ddd;
border: 2px solid #444;
}
.disabled button:hover {
color: #666;
background: #ddd;
border: 2px solid #444;
}
img {
transition: all 1000ms linear;
position: relative;
user-select: none;
will-change: transform;
}<div>
<button id="rotate90">повернуть<br>по часовой</button>
<button id="rotate270">повернуть<br>против часовой</button>
<button id="flipX">отразить<br>по вертикали</button>
<button id="flipY">отразить<br>по горизонтали</button>
</div>
<img id='img' src="https://images.unsplash.com/photo-1602251573001-a27aafb64d64?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDE4OXxxUFlzRHp2Sk9ZY3x8ZW58MHx8fHw%3D&auto=format&fit=crop&h=200&q=60" />
