Question

我正在我的网站上创建一个用于筹款的温度计。我已经创建了一个制作温度计的代码，但它是在水平线而不是垂直线。你能帮忙旋转吗？

由于

        <div class="primary_font font-32px"><span class="font-16px"></span></div>
                <div class='donation_raise_bar' style="background-color:#dee1dd;border-radius:9px;position:relative;width:800;height:26px;">
            <span class="fundraise_raised_percentage" style="background-color:#fb1085;border-radius:20px;display:block;overflow:hidden;height:100%;line-height:1.5;min-width:1%!important;width:50%">
                <center><span class="fundraise_amount_raised white_text arial_font font-12px bold-text">50%</span></center>
            </span>
        </div>
        <div class="margin-top">
            <div class="arial_font font-16px"><span class="bold-text"></span></div>
        </div>
<div id="container_2"></div>
</div>

Answer 1

使用transform css属性。还记得使用边距来确定它的正确位置。

<style>
.donation_raise_bar  {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}
</style>

Answer 2

如果你想用css旋转元素，你可以试试这个

 .rotate {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
 }
.rectangle-box{
   width: 200px;
   height: 200px;
   background-color: yellow;
}

现在将.rotate应用于您的html元素。像

<div class="rectangle-box rotate">
</div>

Answer 3

很抱歉，由于声誉太低，我无法发表评论。您可能需要使用＆＃34; transform-origin＆＃34;当您开始使用旋转以更好地控制旋转轴时的css属性。

HTML中的旋转框

3 个答案: