Rotated Elements in CSS That Affect Their Parent'S Height Correctly

Rotated elements in CSS that affect their parent's height correctly

Assuming that you want to rotate 90 degrees, this is possible, even for non-text elements - but like many interesting things in CSS, it requires a little cunning. My solution also technically invokes undefined behaviour according to the CSS 2 spec - so while I've tested and confirmed that it works in Chrome, Firefox, Safari, and Edge, I can't promise you that it won't break in a future browser release.

Short answer

Given HTML like this, where you want to rotate .element-to-rotate...

<div id="container">
  <something class="element-to-rotate">bla bla bla</something>
</div>

... introduce two wrapper elements around the element that you want to rotate:

<div id="container">
  <div class="rotation-wrapper-outer">
    <div class="rotation-wrapper-inner">
      <something class="element-to-rotate">bla bla bla</something>
    </div>    
  </div>
</div>

... and then use the following CSS, to rotate anti-clockwise (or see the commented out transform for a way to change it into a clockwise rotation):

.rotation-wrapper-outer {
  display: table;
}
.rotation-wrapper-inner {
  padding: 50% 0;
  height: 0;
}
.element-to-rotate {
  display: block;
  transform-origin: top left;
  /* Note: for a CLOCKWISE rotation, use the commented-out
     transform instead of this one. */
  transform: rotate(-90deg) translate(-100%);
  /* transform: rotate(90deg) translate(0, -100%); */
  margin-top: -50%;

  /* Not vital, but possibly a good idea if the element you're rotating contains
     text and you want a single long vertical line of text and the pre-rotation
     width of your element is small enough that the text wraps: */
  white-space: nowrap;
}

Stack snippet demo

p {  /* Tweak the visuals of the paragraphs for easier visualiation: */  background: pink;  margin: 1px 0;  border: 1px solid black;}.rotation-wrapper-outer {  display: table;}.rotation-wrapper-inner {  padding: 50% 0;  height: 0;}.element-to-rotate {  display: block;  transform-origin: top left;  /* Note: for a CLOCKWISE rotation, use the commented-out     transform instead of this one. */  transform: rotate(-90deg) translate(-100%);  /* transform: rotate(90deg) translate(0, -100%); */  margin-top: -50%;
  /* Not vital, but possibly a good idea if the element you're rotating contains     text and you want a single long vertical line of text and the pre-rotation     width of your element is small enough that the text wraps: */  white-space: nowrap;}

<div id="container">  <p>Some text</p>  <p>More text</p>  <div class="rotation-wrapper-outer">    <div class="rotation-wrapper-inner">      <p class="element-to-rotate">Some rotated text</p>    </div>      </div>  <p>Even more text</p>  <img src="https://i.stack.imgur.com/ih8Fj.png">  <div class="rotation-wrapper-outer">    <div class="rotation-wrapper-inner">      <img class="element-to-rotate" src="https://i.stack.imgur.com/ih8Fj.png">    </div>  </div>  <img src="https://i.stack.imgur.com/ih8Fj.png"></div>

Resize div when content is rotated

when you use transform or position:relative; the initial space used by the element remains the same, it is only drawn different at screen.

Here if you want your rotated box to only use the width of one line height, you need to set this width and let content overflow.

translate can be used to replace content in sight

white-space:nowrap to keep text on a single line

and eventually, because of the rotated value used and the width reduced, you may use direction to push overflow in the opposite direction .

html,body {  height: 100%;  margin: 0px;}
.pane {  width: auto;  float: left;  height: 100%;  border: 1px solid black;}
.vertical {  display: inline-block;  text-align: left;  float: right;  padding-right: 1em;  width: 0.25em;  white-space: nowrap;  direction: rtl;  transform-origin: top left;  transform: rotate(-90deg) translate(-100%);}

<div class="pane">  <span class="vertical">This is text</span></div><div class="pane">  <span>This is another Pane</span></div>

How do I adjust rotation based on height, ideally in css only?

You can approximate this differently using clip-path. Resize the main container to see the result:

.box {
  --d:15px;  /*adjust this */

  width:100px;
  height:200px;
  border:1px solid red;
  padding:15px; /* this */
  position:relative;
  z-index:0;
  overflow:hidden;
  resize:both;
}
.box div{
  height:100%;
  background:blue;
}

.box::before {
  content:"";
  position:absolute;
  margin:5px; /* and this */
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background:green;
  clip-path:polygon(0 var(--d),calc(100% - var(--d)) 0,100% calc(100% - var(--d)),var(--d) 100%);
}

<div class="box"> 
  <div></div>
</div>

Make child element unaffected by rotation of parent element

It is not possible to have the innerElement (childElement) to remain in initial state when rotated in 3D by rotating back in -ve deg.

It will work when rotation takes place in 2D .

But you can give a try to transform-style: preserve-3d to see the shapes in 3D effect when rotated with Z coordinate also and preserve the shape instead of just showing in 2D .

You have to reverse the order of rotation too in 3D rotation

You can try to remove the transform-style: preserve-3d and see the effect

.happy_parent {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: rotate(30deg);
}

.happy_child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  transform: rotate(-30deg);

}

.sad_parent {
  width: 100px;
  height: 100px;
  background-color: green;
  transform: rotateX(-60deg) rotateZ(45deg);
  transform-style: preserve-3d;
}

.sad_child {
  width: 50px;
  height: 50px;
  background-color: yellow;
  transform: rotateZ(-45deg) rotateX(60deg);
}

<div class="happy_parent">
  <div class="happy_child"></div>
</div>
<br><br><br><br>

<div class="sad_parent">
  <div class="sad_child"></div>
</div>

Change parent div size when child is rotating

Heavily copying from this answer:

Basically, when you transform (rotate or scale or any other transform value), you are not touching the normal document flow, you are just changing the visual appearance of that element.

So, to answer your question:

Can we adjust the parent when the child is rotating? No, you can't just by CSS. (Anyone who know, please correct me if I am wrong about this.)

You may need to use JavaScript for the same. Do some calculations and apply width and height style to the parent element.

Ref:
from MDN:

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set.

and

By modifying the coordinate space, CSS transforms change the position and shape of the affected content without disrupting the normal document flow. This guide provides an introduction to using transforms.

Keep div height in line with text that has been rotated

Try setting width: auto; and transform-origin, but on the containing div - like this:

div {
    writing-mode:tb-rl;
    transform: rotate(-90deg);
    transform-origin: top left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    white-space:nowrap;
    display:block;
    bottom:0;
    position: absolute;
    outline: solid 2px green;
    width:auto;
    height:20px;
}
h2 {
    margin-top: -5px;
    background: pink;
}

You can see it in action here: http://dabblet.com/gist/2725392
Hope this helps!

Rotated Elements in CSS That Affect Their Parent'S Height Correctly