Question

（原来：改造或不改造）

我想开始旋转DIV盒子，以便在文本框后面旋转。因为文本框似乎并不关心我用DIV做了什么我只是让javascript旋转了DIV。令我惊讶的是 - 通过旋转DIV，文本框与DIV一起旋转，当它们离开DIV盒区域时 - 它们现在被剪裁了。如果我注释掉变换，文本框会回到忽略我对DIV做的任何事情。所以想法为什么这样做？我是否可能必须始终进行转换并将度数设置为零（0）？欢迎提出意见和建议。 :-)这是代码：

PS：我加入了BODY＆＃39;溢出：隐藏;＆＃34;因为我也在测试它。只是一个FYI。： - ）

<html>
<head>
<title>Test</title>
<style>
.p1 {   position:absolute;
                top:50px;
                left:50px;
                border: 1px solid grey;
                padding: 5px;
                font-family: sans-serif,Arial,Helvetica,Verdana,"Trebuchet MS",Tahoma,"MS Sans Serif",Geneva;
                font-size: 12pt;
                width: 150px;
                height: 10pt;
                overflow: hidden;
                z-index:0;
            }
</style>
</head>
<body style='overflow:hidden;'>
<div id='d1' name='d1' style="width:500px;height:400px;overflow:hidden;z-index:1;
    border:1px solid black;clip: rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);">
<p id='p1' name='p1' class='p1'>This is a test of how HTML works</p>
<p id='p2' name='p2' class='p1'>This is a test of how HTML works</p>
<p id='p3' name='p3' class='p1'>This is a test of how HTML works</p>
</div>
<script>
function moveIt(n)
{
    document.getElementById("p1").style.left = n;
    document.getElementById("p2").style.top = n;
    document.getElementById("p3").style.left = n;
    document.getElementById("p3").style.top = n;
//  document.getElementById("d1").style.transform = "rotate(" + n + "deg)";
    if( n < 2000 ){ setTimeout("moveIt(" + (n + 1) + ")", 1 ); }
        else { moveIt2(n); }
}
function moveIt2(n)
{
    document.getElementById("p1").style.left = n;
    document.getElementById("p2").style.top = n;
    document.getElementById("p3").style.left = n;
    document.getElementById("p3").style.top = n;
//  document.getElementById("d1").style.transform = "rotate(" + n + "deg)";
    if( n > -1000 ){ setTimeout("moveIt2(" + (n - 1) + ")", 1 ); }
        else { moveIt(n); }
}
    moveIt(50);
</script>
</body>
</html>

Answer 1

父元素的CSS变换会影响所有父元素。这就是文本旋转的原因。

你可以通过对父母的正向旋转施加相等数量的负旋转来阻止他们的旋转。

另外：在设置元素的位置时，您需要提供px等单位，如下所示：

document.getElementById('p1').style.left = n + 'px';

Working Fiddle

转换DIV

1 个答案: