Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <div class="container">
- <div class="statusColumn"><span>Normal</span></div>
- <div class="statusColumn"><a>Normal</a></div>
- <div class="statusColumn"><b>Rotated</b></div>
- <div class="statusColumn"><abbr>Normal</abbr></div>
- </div>
- .statusColumn b {
- writing-mode: tb-rl;
- white-space: nowrap;
- display: inline-block;
- overflow: visible;
- transform: rotate(-90deg);
- transform-origin: 50% 50%;
- }
- <div id="container">
- <something class="element-to-rotate">bla bla bla</something>
- </div>
- <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>
- .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;
- }
- $(".statusColumn").each(function() {
- var $this = $(this),
- child = $this.children(":first");
- $this.css("minHeight", function() {
- return child[0].getBoundingClientRect().height;
- });
- });
- transform: rotate(-90deg) translateX(-100%);
- transform-origin: top left;
- <br>
Add Comment
Please, Sign In to add comment