Question

请您查看 THIS DEMO ，并告诉我left:0px;使用-webkit-transform: rotate(-90deg);

时

#tab{
    position:fixed;
    width:120px;
    height:15px;
    left:-0px;
    background:green;
    top:300px;
    padding:15px;
    text-align: center;
   -webkit-transform: rotate(-90deg);
}

无效的原因

由于

＆＃13;

<div id="tab">Draw</div>

＆＃13;

{{1}}

＆＃13;

Answer 1

您需要在转换后重新定位。这可以通过transform-origin来完成： Mozilla documentation on transform-origin 另请查看这篇文章，其中解释了如何进行转换： Sitepoint article, scroll to The transform-origin Property

#tab{
    position:fixed;
    width:120px;
    height:15px;
    left:-0px;
    background:green;
    top:300px;
    padding:15px;
    text-align: center;
   -webkit-transform: rotate(-90deg);
    transform-origin: left top; /* this does the trick */
}

<div id="tab">Draw</div>

使用变换旋转时，固定Div不能正确定位在左侧

1 个答案: