Question

这个让我难过了好几天。我有一个简单的设置。外DIV，内部DIV，内部DIV内的图像。我正在尝试使用CSS来旋转内部div，然后将外部div调整为内部div的新尺寸。这会导致各种各样的问题。

这是一个JSFiddle，展示了会发生什么：

单击“旋转内部”以查看当您不触摸外部DIV尺寸时内部如何旋转完美。然后重新运行小提琴，然后单击Rotate Inner + Outer，你就会搞得一团糟。图像旋转但内部div不旋转。外部div根据内部div甚至看不到的尺寸调整大小。 AHHHHHHHhhhhhh !!

以下是代码：

#wrapper {
display: block;
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: auto;    
border: 1px solid green;

#inner {
    width: 100%;
    height: 100%;
    border: 1px dotted red;

    img {
        width: 100%;
    }            
}
}

和js：

$('#rotate').click (ev) ->
    ev.preventDefault()

    $wrapper = $('#wrapper')
    $inner = $('#inner')

    rotation = $inner.data('rotation') + 90
    rotation = 0 if rotation >= 360

    $inner.data('rotation',rotation).css({'-webkit-transform': "rotate(#{rotation}deg)"})

$('#rotate_io').click (ev) ->
    ev.preventDefault()

    $wrapper = $('#wrapper')
    $inner = $('#inner')

    rotation = $inner.data('rotation') + 90
    rotation = 0 if rotation >= 360

    $inner.data('rotation',rotation).css({'-webkit-transform': "rotate(#{rotation}deg)"})

    dimensions = $inner.get(0).getBoundingClientRect()
    rotatedWidth = dimensions.width
    rotatedHeight = dimensions.height

    $wrapper.width(rotatedWidth).height(rotatedHeight)

有什么想法吗？

Answer 1

喜欢这个吗？

http://jsfiddle.net/h3M8r/1/

$('#rotate_io').click (ev) ->
    ev.preventDefault()

    $wrapper = $('#wrapper')

    rotation = $wrapper.data('rotation') + 90
    rotation = 0 if rotation >= 360

    $wrapper.data('rotation',rotation).css({'-webkit-transform': "rotate(#{rotation}deg)"})

如果要旋转外部元素，则不需要对内部元素执行任何操作 - 它将与其父（外部）元素一起旋转。

Answer 2

好的，我错了，你正在改变维度。

问题是另一个问题：当你说内部宽度是100％时，这意味着内部宽度在之前旋转设置为外部宽度。

因此内部的尺寸设置为错误的值，看起来没有旋转（但如果你看图像，是旋转。

解决这个问题的唯一方法就是设置内部固定的尺寸。

当你解决这个问题时，还有另一个问题，即旋转不再居中。

我已经使用旧技巧解决了这个问题，将设置边距和顶部/左侧属性设为中心

CSS

#wrapper {
    display: block;
    position: absolute;
    top: 100px;
    left: 100px;
    width: 200px;
    height: auto;    
    border: 1px solid green;

    #inner {
        width: 200px;
        height: 80px;
        left: 50%;
        margin-left: -100px;
        top: 50%;
        margin-top: -40px;
        border: 1px dotted red;
        position: absolute;

        img {
            width: 100%;
        }            
    }
}

调整外部div时，CSS无法旋转内部div

2 个答案:

fiddle