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!
Related Topics
Align Mat-Cards Content (Image, Text and Buttons)
Background Color of Text in Svg
How to Make a Div Expand Vertically to Wrap the Content Within It
Is There a "Previous Sibling" Selector
Align Inline-Block Divs to Top of Container Element
Transitions on the CSS Display Property
How to Set the Height of Vuetify Card
How to Make an Element Fill the Remaining Viewport Height
Angular Material Mat-Drawer in Full Height Flex, Content Overflow Auto
How to Make an Svg Scale With Its Parent Container
How to Prevent Long Words from Breaking My Div
How to Center ≪Ul≫ ≪Li≫ into a Div
Make Nested Div Stretch to 100% of Remaining Container Div Height
Css: How to Say .Class:Last-Of-Type [Classes, Not Elements!]
Mvc4 Stylebundle Not Resolving Images
Css Hover Drop Down Menu Disappears When Trying to Select Menu Option
How to Reference Jsf Image Resource as CSS Background Image Url