How to write bottom to top vertically with css - html

Question

How to write vertically from bottom to up with HTML and CSS? I have tried many things writing-mod:tb-rl; but the issue not yet solved.

Answer 1

Create a div with class rotate
<div class="rotate"> Hello World </div>
Then define the CSS class
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
Hope this is what you are looking for.

Answer 2

try using transforms.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Answer 3

.rotate {
/* make width fit content */
display: inline-block;
/* rotate 90 degrees counterclockwise */
/* and move down on 100% of its height */
/* (actually width, but when rotated it looks like height) */
transform: rotate(-90deg) translateX(-100%);
/* perform this transformation relatively to the top left corner of block */
transform-origin: top left;
/* styles for demo */
padding: 10px;
background-color: red;
color: #fff;
text-transform: uppercase;
}
<div class="rotate">Profile</div>
But beware that transformed element takes its position the same if it wouldn't be transformed. So in case you'd have some siblings with text it will be overlapping them. Demo:
.rotate {
display: inline-block;
transform: rotate(-90deg) translateX(-100%);
transform-origin: 0 0;
/* just styles for current demo */
padding: 10px;
background-color: red;
color: #fff;
text-transform: uppercase;
}
<div class="container">
<div class="rotate">Profile</div>
<div>Some other text</div>
<div>Some other text</div>
<div>Some other text</div>
</div>
In this case you can apply absolute positioning to this element. Demo:
.container {
/* make absolute positioning relative to container */
position: relative;
/* some offset for its not rotated text */
/* need to be equal rotated element height + offset from rotated element */
padding-left: 45px;
}
.rotate {
display: inline-block;
transform: rotate(-90deg) translateX(-100%);
transform-origin: 0 0;
/* apply absolute positioning */
position: absolute;
/* move element to the left */
left: 0;
/* just styles for demo */
padding: 10px;
background-color: red;
color: #fff;
text-transform: uppercase;
}
<div class="container">
<div class="rotate">Profile</div>
<div>Some other text</div>
<div>Some other text</div>
<div>Some other text</div>
</div>