CODEWITHSUNDEEP
htmlcsscss-transforms
Sue
Sue

Reputation: 445

html Transform rotate 90 deg with div

I am adding several divs to make the last div in a parent div to appear on the right side of parent div but rotated 90 degrees. However my content is being pushed out of the div. Below is the code so far:

 <div style="width:20px; float: right; margin: 0; padding: 0;  ">
  <div style="margin: 5px 5px 5px 0; vertical-align:bottom;">
   <div style="transform: rotate(90deg); vertical-align: bottom;margin-bottom: 0;left:0; font-size: 8px; width: 56px ; height: 55px">
                        TESTING NOW
                    </div>
                </div>
            </div>

Upvotes: 0

Views: 4150

Answers (4)

CupawnTae
CupawnTae

Reputation: 14600

The problem is your inner div is bigger than the outer div and sticking out over the edge. Then when you rotate the inner div, by default it's rotating about its centre, so the text that was on top rotates around to the right.

You can change the relative sizings and positioning to compensate. Alternatively you could apply a transform-origin to tell the browser to rotate about (for example) the top left corner instead:

<div style="width:20px; float: right; margin: 0; padding: 0;  ">
  <div style="margin: 5px 5px 5px 0; vertical-align:bottom;">
    <div style="transform-origin: 0 0 0; transform: rotate(90deg); vertical-align: bottom;margin-bottom: 0;left:0; font-size: 8px; width: 56px ; height: 55px">
      TESTING NOW
    </div>
  </div>
</div>

Or (as requested in your comment) you could align your text to the bottom of the div using display: flex; align-items: flex-end (note that in this example the div still overflows, which may or may not be an issue depending on the rest of your CSS).

<div style="width:20px; float: right; margin: 0; padding: 0;  ">
  <div style="margin: 5px 5px 5px 0; vertical-align:bottom;">
    <div style="display: flex; align-items: flex-end; transform: rotate(90deg); vertical-align: bottom;margin-bottom: 0;left:0; font-size: 8px; width: 56px ; height: 55px">
      TESTING NOW
    </div>
  </div>
</div>

Upvotes: 2

Sue
Sue

Reputation: 445

I used the transform origin, I am posting my answer it could help someone else looking for it

 <div style="width:20px;height: 100%; float: left; margin: 0; padding: 0; background-color: lightgrey; ">
            <div style="margin: 5px 5px 5px 0;">
                <div style="transform: rotate(-90deg); font-size: 9px; width: 70px ; height: 55px;text-space: 5px; ">
                    Testing Testing
                </div>
            </div>
        </div>

Upvotes: 0

ahPo
ahPo

Reputation: 384

Try this:

<div style="float: right; margin: 0; padding: 0;  ">
  <div style="width: 60px;">
     <div style="font-size: 8px; transform: rotate(90deg); margin-top: 26px;">
        TESTING NOW 
     </div>
  </div>
</div>

where "margin-top" of the innermost = (width of the parent - font size)/2

Upvotes: 1

Abhay Shukla
Abhay Shukla

Reputation: 389

dont use float: right; in the parent DIV, that will push your innermost DIV out while rotating

instead, assign a 100% width to the outermost parent DIV, add a DIV element before the rotated one and assign in the width of the left side element you want and use float:right in the innermost

EDIT:

THis code should do what you want.. you can mess around with the widths to get what you want:

<div style="width:100%;  margin: 0; padding: 0;  ">
<div style="width:90%;  margin-right: 5px; padding: 0;  ">
</div>
<div style="float: right;transform: rotate(90deg); vertical-align: bottom;margin-bottom: 0;left:0; font-size: 8px; width: 56px ; height: 55px">TESTING NOW
</div>
</div>

Upvotes: 0

Related Questions