Rotierende Box in HTML

Question

Ich erstelle ein Thermometer für Fundraising auf meiner Website. Ich habe einen Code erstellt, um das Thermometer zu erstellen, aber es ist eine horizontale Linie und keine vertikale Linie. Kannst du bitte helfen, das zu drehen?

Dank

 <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

Verwenden CSS-Eigenschaft verwandeln. Denken Sie auch daran, Ränder zu verwenden, um die richtige Position zu fixieren.

<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

Wenn Sie ein Element mit CSS drehen möchten Sie dieses

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

versuchen können nun .rotate auf Ihre HTML-Element anzuwenden. Wie

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

Answer 3

Sorry, ich kann nicht wegen meiner zu niedrigen Ruf kommentieren. Sie müssen wahrscheinlich die CSS-Eigenschaft "transform-origin" verwenden, wenn Sie mit rotieren beginnen, um eine bessere Kontrolle über die Rotationsachse zu erhalten.