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 和你的 fiddle 一起工作，并且能够按照我认为你想要的方式让它工作。基本上你需要检查图像是否垂直并设置 max-height/wid 并考虑边距偏移和边框。

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

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; 
});

});

Answer 2

尝试让它适用于任何可能的图像，我添加了另一个元素，容器，有 2 个状态

#container {
    width: 140px;
    height: 100px;
    position: absolute;
        -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;  
}

#container.rotated {
    width: 100px;
    height: 140px;
    top: 20px;
    left: 20px;
}

fiddle

Answer 3

你也可以在transform属性上加一个scale()，计算图片的宽高比。 看到这个 fiddle: http://jsfiddle.net/52pxbfcs/25/

    // within the click function
    var ratio = 1,
        $img = $("#img"),
        $parent = $('#parent');

    if (angle === 90 || angle === 270) {
        ratio = $parent.width() / $img.height();
    }

CSS3 onclick旋转和缩放

CSS3 onclick rotate and scale

javascript

css

jquery

rotation