我正在使用CSS 2D转换矩阵来旋转图像。实际旋转很好。问题是当您向转换添加过渡时。
此plnkr显示了问题。http://next.plnkr.co/edit/6BKBawfUa9NUXlVY?preview
**编辑**该代码笔使其更加清晰。单击旋转按钮，并注意旋转方向
https://codepen.io/realview-the-bold/pen/KKwrLPP
CSS转换代码为：
.rotate {
transition: transform 0.5s;
}[每次单击旋转时，它将图像旋转90度。旋转4周后，您将返回到原始旋转。
我期望过渡以顺时针方式进行，但是从180到270，过渡是逆时针。
[请注意，我需要一个使用矩阵而不是rotate（Ndeg）变换的解决方案。
谢谢
我希望这是您的期望。
matrix（）的语法：
矩阵（a，b，c，d，tx，ty）
a b c d-是<number>描述线性变换。
tx ty-是<number>描述要应用的翻译。
矩阵的初始条件，
（即，在0度处-a和d的值将为1，因此maxtrix = [1,0,0,1,0,0]] >>
如果朝顺时针方向旋转：
在90度时，b = 1且c = -1的值，因此[0,1，-1,0,0,0]
在180度时-a = -1且b = -1的值，因此[-1,0,0，-1,0,0]
在270度-在[0，-1,1,0,0,0]之前b = -1和c = 1的值
您还可以使用dom样式转换属性来执行此操作。
img.style.transform = "matrix(0, 1, -1, 0, 0, 0)";
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script>
var currentRotation = 0;
function showRotationState() {
document.getElementById("rotateState").innerHTML = `Current rotation is ${currentRotation}`
}
function rotate() {
let matrix = []
console.log(currentRotation);
let img = document.getElementById("img");
if (currentRotation == 0) {
matrix = [0, 1, -1, 0, 0, 0];
//img.style.transform = "matrix(0, 1, -1, 0, 0, 0)";
currentRotation = 90;
} else if (currentRotation == 90) {
matrix = [-1, 0, 0, -1, 0, 0];
//img.style.transform = "matrix(-1, 0, 0, -1, 0, 0)";
currentRotation = 180;
} else if (currentRotation == 180) {
matrix = [0, -1, 1, 0, 0, 0];
//img.style.transform = "matrix(0, -1, 1, 0, 0, 0)";
currentRotation = 270;
} else if (currentRotation == 270) {
matrix = [1, 0, 0, 1, 0, 0];
// img.style.transform = "matrix(1, 0, 0, 1, 0, 0)";
currentRotation = 0;
}
showRotationState();
img.style.transform = `matrix(${matrix.toString()})`;
}
</script>
</head>
<body onload="showRotationState()">
<button onclick="rotate()">rotate</button><br><br>
<div id="rotateState"></div>
<img id="img" class="rotate" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSCp-PuCnhjtoiAueYMVI9Pw0yz-819jQTavGj8hhlkZrzwkMYG&s" width="300">
</body>
</html>