使用 jquery/css 进行图像旋转

Question

我需要实现图像旋转。我有一个 iframe 来加载我的图像。我在 iframe 中有图片。

我用css（变换）来旋转。图像已旋转，但 div 未调整大小。

 

<div id="object_box" style="width: 1100px; height: 681px;" >
    <iframe id="objframe" style="width: 1100px; height: 681px; background: transparent;" scrolling="no" src="objectload.xhtml?fid=4423"></iframe>
</div>

function rotateImg(){

    angle = (angle+90)%360;
    $("#im_temp_load").attr("class","rotate"+angle);

    var imgWidth = "";
    var imgHeight = "";

    if(angle=="90" || angle=="270"){

        imgWidth = $("#im_temp_load").height();
        imgHeight = $("#im_temp_load").width();
    }else{

        imgWidth = $("#im_temp_load").width();
        imgHeight = $("#im_temp_load").height();

    }


    $("#object_box").css({"width": imgWidth, "height": imgHeight});
    $("#objframe").css({"width": imgWidth, "height": imgHeight});

}

Answer 1

感谢您的帮助。我发现了问题。我们可以通过 window.parent.document

访问父 div

function rotateImgLeft(){

    angle = (angle+90)%360;
    $("#im_temp_load").attr("class","rotate"+angle);

    var imgWidth = "";
    var imgHeight = "";

    if(angle=="90" || angle=="270"){

        imgWidth = $("#im_temp_load").height();
        imgHeight = $("#im_temp_load").width();
    }else{

        imgWidth = $("#im_temp_load").width();
        imgHeight = $("#im_temp_load").height();

    }

    $('#object_box', window.parent.document).css({"width": imgWidth, "height": imgHeight});
    $('#objframe', window.parent.document).css({"width": imgWidth, "height": imgHeight});

}


function rotateImgRight(){

    angle = (angle+270)%360;
    $("#im_temp_load").attr("class","rotate"+angle);

    var imgWidth = "";
    var imgHeight = "";

    if(angle=="90" || angle=="270"){

        imgWidth = $("#im_temp_load").height();
        imgHeight = $("#im_temp_load").width();
    }else{

        imgWidth = $("#im_temp_load").width();
        imgHeight = $("#im_temp_load").height();

    }

    $('#object_box', window.parent.document).css({"width": imgWidth, "height": imgHeight});
    $('#objframe', window.parent.document).css({"width": imgWidth, "height": imgHeight});

}

使用 jquery/css 进行图像旋转

Image rotation using jquery/css

jquery

css

xhtml