Question

我有一个父div，我正在应用-90度的旋转变换。在div中，其中一个孩子不应该变换，我尝试变换：none及其所有变体，但没有任何效果，无论如何都会变换。因此，我必须对子元素应用反向旋转以将其设置为水平。

现在出现的问题是，更改应用了反向旋转的子项的左侧实际上会更改其顶部，并且在使用Firebug更改时，更改顶部会更改其左侧。因此子元素显示在错误的位置。

if(self._sOrientation == "vertical"){
             self.RotatePH($thisComp.closest('.ComponentFrame'),"-90deg");
             if(self.isIE==false){
                self.RotatePH($thisComp.find('.revertTransform'),"90deg");
//                $thisComp.find('.revertTransform').css('-moz-transform', 'none');
             }

实际上，组件太复杂，无法在堆栈溢出时提供任何可用的代码

修改

我认为第二次旋转应该围绕主要部件的轴而不是围绕自身旋转。是否可以改变旋转轴？

孩子有位置：固定;如果重要

Answer 1

我创建了Fiddle以更好地了解您的问题，我认为这不是与转换轴相关的事情。

更简单地说，当你改变子元素的顶部或左侧位置时，它会正确地引用它的父元素然后进行转换。

First image

子div改变它的位置，引用父div并继承它的转换。

所以你看到的最终效果是当你调整顶部和反面时，对象正在改变它的左侧位置，但事实上并非如此。

Second Image

儿童div似乎向左上方移动，但实际上并非如此。

我建议你改变你的方法，如果它适用于你的情况，并创建一个false_parent元素，而不是一个孩子（你可以在小提琴中看到）。

//INSTEAD OF THIS APPROACH

<div class="parent">PARENT DIV
        <div class="child">CHILD DIV</div>
</div>    

//USE THIS APPROACH
<div class="fake_child">CHILD DIV
        <div class="fake_parent">PARENT DIV</div>
</div>

CSS

.parent {
    width:100px;
    margin:3em;
    padding:2em;
    transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    /* IE 9 */
    -webkit-transform:rotate(45deg);
    background-color:rgb(0, 112, 255);
}

.child {
    background-color: #fff;
    position: absolute;
    padding:1em;
    transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
}

.fake_child{
    width: 100px;
    background-color: #fff;
    padding: 1em;
    margin: 3em;
    position: relative;
}

.fake_parent{
    position:absolute;
    width:100%;
    height:200%;
    background-color: rgb(0,121,255);
    top:0;
    left: 0;
       transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    /* IE 9 */
    -webkit-transform:rotate(45deg);
    z-index: -1;

}

body {
    background-color: #ccc;
    font-family: Arial, sans-serif;
}

Answer 2

你不能使用transform-origin（http://css-tricks.com/almanac/properties/t/transform-origin/）：

-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-o-transform-origin: center center;
transform-origin: center center;

Answer 3

我认为第二次旋转应该围绕主要部件的轴而不是围绕自身旋转。是否可以改变旋转轴？

是的，如果您知道父母的宽度（或者孩子宽度与父母宽度的比例，我相信）。您可以使用transform-origin通过设置transform-origin: hpw hpw让孩子旋转回原始位置，其中hpw是父级宽度的一半。

如果我们只旋转了父级，并且子级相对于父级位于（0,0），则子级将最终位于父级的左下角。想象一个盒子的宽度和高度都设置为父级的宽度，并相对于旋转的父级位于（0,0）。（因此孩子就在这个盒子的左下角。）应该清楚的是，旋转这个盒子会让孩子回到它的原始位置和旋转。

孩子的左上角和左上角仍然是相对于旋转的父级，因此您必须使用left: your_top * -1和top: your_left定位孩子。

演示：http://jsfiddle.net/HTCwL/1/

修改：这是一个动画版的演示版，可以让事情更清晰http://jsfiddle.net/HTCwL/2/

CSS旋转变换 - 左侧和顶部问题

3 个答案:

子div改变它的位置，引用父div并继承它的转换。

儿童div似乎向左上方移动，但实际上并非如此。