var suoxiao = $(".suoxiao"),
    fangda = $(".fangda"),
    fullscreen = $(".fullscreen"),
    leftshuaxin = $(".leftshuaxin"),
    rightshuaxin = $(".rightshuaxin");
var mainImg = $(".mainImg")

suoxiao.onclick = function() {
    var value = Scale() - 0.2;
    if (value != 0) {
        $(".mainImg").style.transform = `scale(${value}) rotate(${Rotate()}deg)`
    }
}
fangda.onclick = function() {
    $(".mainImg").style.transform = `scale(${Scale() + 0.2}) rotate(${Rotate()}deg)` //两个值都有才可以使用
}
fullscreen.onclick = function() {
    $(".mainImg").style.transform = `scale(2) rotate(${Rotate()}deg)`
}
leftshuaxin.onclick = function() {
    xuanzhuan(-90)
}
rightshuaxin.onclick = function() {
    xuanzhuan(90)
}

//封装
function $(className) {
    return document.querySelector(className);
}

function xuanzhuan(offset) {
    $(".mainImg").style.transform = `scale(${Scale()}) rotate(${Rotate() + offset}deg)`
}

function Scale() { //获取缩小的值
    return Number($(".mainImg").style.transform.match(/scale\(([\s\S]*?)\) /)[1])
}

function Rotate() { //获取旋转的值
    return Number($(".mainImg").style.transform.match(/rotate\(([\s\S]*?)deg\)/)[1])
}