CODEWITHSUNDEEP
htmlcss
R.Donald
R.Donald

Reputation: 11

Rotating box in HTML

I am creating a thermometer for fundraising on my website. I have created a code to make the thermometer but it is at a horizontal line not a vertical line. Can you please help to rotate this?

Thanks

        <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>

Upvotes: 1

Views: 1713

Answers (3)

AlaricB
AlaricB

Reputation: 366

Sorry, i can't comment because of my too low reputation. You will probably need to use "transform-origin" css property when you start using rotate to have a better control on the axis of rotation.

Upvotes: 1

Zugor
Zugor

Reputation: 881

If you want to rotate an element with css you can try like this

 .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;
}

now apply .rotate to your html element. Like

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

Upvotes: 1

Adharsh M
Adharsh M

Reputation: 2812

Use transform css property. Also Remember to use margins to fix it proper position.

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

Upvotes: 2

Related Questions