How to Make a Rotated Element Height:100% of Its Parent

How to make a rotated element height:100% of its parent?

You can consider writing-mode

body {  display: flex;  flex-direction: column;  min-height: 93vh;  align-items: center;  background: #222;  color: #eee;  font-family: "Dosis", sans-serif;}
.side-text {  position: relative;  font-size: 4em;  color: #eee;  background: none;  padding: 0.4em 0.5em 0.4em 0.3em;  border: 5px solid #eee;  margin:5px;}
.side-text::after {  position: absolute;  content: "Points Needed";  font-size: 0.25em;  color: #222;  background: #eee;  text-align: center;  transform: rotate(-180deg);  right: 0;  top: -1px;  bottom: -1px;  writing-mode: vertical-lr;}

<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" /><div class="side-text">  50</div><div class="side-text">  5000</div>

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>

How to dynamically fit a rotated element to the parent element with CSS?

You need to consider transform-origin and some translation too

body {  background-color: #333;}
.container {  background-color: #000;  position: absolute;  height: 25vh;  width: 25vw;  margin: auto;  top: 0;  left: 0;  right: 0;  bottom: 0;}
.element {  position: absolute;  background-color: #abc;  height: 25vw;  width: 25vh;  transform: translateY(-100%) rotate(90deg);  transform-origin: bottom left;}

<div class="container">  <div class="element"></div></div>

How to make parent div follow the height of a 45 degree rotated child div

For maximum flexibility (no matter what size the green square has) - use javascript to calculate the new height by looking at this like a right triangle, and using the Pythagoras Theorem:

if the formula is:
a²+b²=c²

then:
c = √(a²+b²)

then just set the parent-container height with the value of c.

let $a = $('.child-diamond').width(),
$b = $('.child-diamond').height(),
$c = Math.sqrt((Math.pow($a, 2)) + (Math.pow($b, 2)));

$('.parent-container').height($c);

(example uses jQuery)
https://codepen.io/anon/pen/jgBaVR

Using Height/Width 100% After Rotating an Element with CSS

I hope this can help you:
even you rotate an element, height, width, left and top properties are calculated on unrotaded element. You must consider container dimension and manually invert value.
Normally rotation make element's center point as reference. (you can change with transorm-origin, but in this case is not necessary if video element is already centered)

$(function() {
 $('button').click(function() {

   var container = $("video").parent()

   $('video').height($(container).width());
   $('video').width($(container).height());

   $('video').css('position', 'absolute')
   var px = $(container).width() / 2
   var py = $(container).height() / 2
   $('video').css('left', px-py).css('top', py-px);
   //$("video").css({"transform":"rotate(90deg)"})
 });
});

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.

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>

How to rotate an element inside a div, and the div will change its height and width base on the rotated element?

The problem with doing just a transform is that the element still has the same positioning and size as before the transform as far as the overall layout goes.

What you could use is a vertical text writing method. This is not a transform and the element will take up the dimensions:

/* Gallery Title and Nav */

.gallery-title-and-nav {
  position: absolute;
  background: red;
  height: 60vh;
  width: fit-content;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  overflow: hidden;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-basis: auto
}

.gallery-title {
  background: green;
  height: fit-content;
  width: fit-content;
}

.gallery-title h2 {
  transform: rotate(180deg);
  writing-mode: vertical-lr;
}

.gallery-nav {
  background: blue;
}

<!-- Gallery Title and Nav-->
<div class="gallery-title-and-nav">
  <!-- Gallery title -->
  <div class="gallery-title">
    <h2>GALLERY</h2>
  </div>

  <!-- gallery pciker -->
  <div class="gallery-nav">
    <h4>POSTER</h4>
    <h4>INFOGRAPHICS</h4>
    <h4>MAGAZINE 01</h4>
    <h4>MAGAZINE 02</h4>
  </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>

---

Related Topics