JS和CSS使图片旋转

谁借莪１个温暖的怀抱￠ 2022-06-05 04:25 295阅读 0赞

**“秋风宝剑孤臣泪，落日旌旗大将坛”**  
如题,,我们要使图片可以旋转,,在图片上添加点击事件.  
JSP代码:

JS代码:

/** * 图片旋转 */
    function picture_rotate(e){
        var pDiv=$("#"+e.id).attr("id");
        var step=90;//每次旋转多少度
        var angle=getTransformRotate(pDiv);
        console.log("pid===" + pDiv);
        console.log("angle===" + angle);
        var pDivWidth=$("#"+e.id).parent().css("width");
        var pDivHeight=$("#"+e.id).parent().css("height");
        $("#"+pDiv).css({
       'transform':'rotate('+(step+angle)%360+'deg)'});
    }
    
    /** * 获取图片旋转角度 */
    function getTransformRotate(id){
        var el = document.getElementById(id);
        var st = window.getComputedStyle(el, null);
        var tr = st.getPropertyValue("-webkit-transform") ||
            st.getPropertyValue("-moz-transform") ||
            st.getPropertyValue("-ms-transform") ||
            st.getPropertyValue("-o-transform") ||
            st.getPropertyValue("transform") ||
            "FAIL";
        // With rotate(30deg)...
        // matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
        // rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix
        var values = tr.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var c = values[2];
        var d = values[3];
        var scale = Math.sqrt(a * a + b * b);
        // arc sin, convert from radians to degrees, round
        var sin = b / scale;
        // next line works for 30deg but not 130deg (returns 50);
        // var angle = Math.round(Math.asin(sin) * (180/Math.PI));
        return angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
    }