今天有个工作内容,是每次点击图片的时候实现图片的90°翻转,因为项目的前端框架比较老,所以只能用JS在图片上绑定点击事件实现了,下面是实现代码,具体使用需要具体调试,毕竟有些使用场景不同
js控制图片 翻转90°
function rotateImage() {
var image = document.getElementById('imgA');
var transformValue = window.getComputedStyle(image).getPropertyValue('transform');
var rotate = 0;
if (transformValue !== 'none') {
transformValue=transformValue.substring(7,transformValue.length-1);(这一行看情况)
var matrix = transformValue.split(',');
rotate = Math.round(Math.atan2(parseFloat(matrix[1]), parseFloat(matrix[0])) * (180/Math.PI));
}
image.style.transform = 'rotate(' + (rotate + 90) + 'deg)';
}