javascript - CSS3 onclick 旋转和缩放

Question

我使用 CSS 和 jQuery 创建了一个简单的效果，可以在点击时旋转图像。到目前为止，还不错，但是当图像变宽时，我想将它保留在父 div 中(在旋转的同时缩放它)。

这里有一个 fiddle 来澄清我的问题:http://jsfiddle.net/52pxbfcs/2/ (只需单击图像即可旋转)。

$(document).ready(function() {
    var angle = 90;
    $(document).on("click", "#parent", function() {	
        $("#img").css ({
            '-webkit-transform': 'rotate(' + angle + 'deg)',
            '-moz-transform': 'rotate(' + angle + 'deg)',
            '-o-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)',
        });
        angle+=90; 
    });
	
});

#parent {
    width:140px;
    height:100px;
    border:2px solid #000;
    text-align:center;
}

#img {
     max-width:100%;
    max-height:100%;

	-webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
    <img src="http://i.ytimg.com/vi/nlobCS5Al8s/maxresdefault.jpg" id="img"/>
</div>

谢谢，我们将不胜感激。

Answer 1

我摆弄了你的 fiddle ，并且能够按照我认为你想要的方式让它工作。基本上您需要检查图像是否垂直并设置最大高度/宽度并考虑边距偏移和边框。

现在还修正了高度>宽度图像的边距

Updated fiddle

$(document).ready(function() {
var angle = 90;

$(document).on("click", "#parent", function() { 
    var normalOrientation = angle % 180 == 0;
    var w = $('#parent').width();
    var h = $('#parent').height();
    var iw = $('#img').width();
    var ih = $('#img').height();
    var border = parseFloat($('#parent').css('border-top-width').replace(/px/,''));
    var marginTop = border + ((Math.max(iw,ih) - Math.min(iw,ih))/2) - ((h - ih)/2);
    $("#img").css ({
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-moz-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)',
        '-ms-transform': 'rotate(' + angle + 'deg)',
        maxHeight : normalOrientation ? '100%' : w,
        maxWidth : normalOrientation ? '100%' : h,
        marginTop: normalOrientation || ih === iw ? 0 : ih > iw ? 0 - marginTop : marginTop
    });
    angle+=90; 
});

});