How to Rotate Text in CSS

How do I rotate text in css?

You need to use the CSS3 transform property rotate - see here for which browsers support it and the prefix you need to use.

One example for webkit browsers is -webkit-transform: rotate(-90deg);

Edit: The question was changed substantially so I have added a demo that works in Chrome/Safari (as I only included the -webkit- CSS prefixed rules). The problem you have is that you do not want to rotate the title div, but simply the text inside it. If you remove your rotation, the <div>s are in the correct position and all you need to do is wrap the text in an element and rotate that instead.

There already exists a more customisable widget as part of the jQuery UI - see the accordion demo page. I am sure with some CSS cleverness you should be able to make the accordion vertical and also rotate the title text :-)

Edit 2: I had anticipated the text center problem and have already updated my demo. There is a height/width constraint though, so longer text could still break the layout.

Edit 3: ~~It looks like the horizontal version was part of the original plan but I cannot see any way of configuring it on the demo page.~~ I was incorrect… the new accordion is part of the upcoming jQuery UI 1.9! So you could try the development builds if you want the new functionality.

Hope this helps!

How to rotate text 90 degrees inline

Here is a small visual example:

#rotate-text {   width: 25px;   transform: rotate(90deg);}

<div id="rotate-text">  <p>My paragraph</p></div>

How to rotate text and position it properly? (CSS, HTML)

The solution was a combination of Diego's answer and Smamatti's comment:

I had to use transform-origin:bottom and width:0. That was working rather quickly, the big problem I had was positioning the text independently to the length of the text. I've only managed to do this by using javascript.

.header
{
    margin: 0;
    width: 0;
    white-space: nowrap;
    position: absolute;
    text-align: left;
    transform-origin: bottom; 
    margin-top: 280px;
    transform: rotate(270deg);
}

Javascript (to ensure compatibility to variables text length):

function adjustSideHeader() {

//check if the headline is visible
  if($('h1.headline').length > 0)
  {
    var headline = $('h1.headline')[0];
    var stringLength = headline.textContent.length;
    //add style tag to support media queries
    document.querySelector('style').textContent +=
       "h1.headline { margin-top: " + (stringLength*23.5) + "px; -webkit-transition: margin-top 2s; transition: margin-top 2s;}"
  }    
}

// fire it when document is loaded
$(document).ready(setTimeout(adjustSideHeader, 300));

Result:

Sample Image

How can I properly rotate a text inside a table cell

You can use writing-mode: vertical-rl; combined with a scale transformation:

table {  text-align: left;  border-collapse: collapse;}
td,th {  border: 1px solid lightgrey;  padding: 0px 3px;}
td:not(:first-child) {  min-width: 140px;}
.table_title_top {  text-align: center;}
.table_title_left {  text-align: center;  width: 35px;}
.table_title_left div {   writing-mode: vertical-rl;   white-space:nowrap;   transform:scale(-1);}

<!DOCTYPE html><html lang="en" dir="ltr">
<head>  <meta charset="utf-8"></head>
<body>  <table>    <tbody>      <tr>        <td></td>        <td colspan="100" class="table_title_top">          <div>Title Top Title Top</div>        </td>      </tr>      <tr class="calc-tr calc-tr-title">        <td rowspan="100" class="table_title_left">          <div>Title Left Title Left</div>        </td>        <td>0</td>        <td>0</td>        <td>0</td>      </tr>      <tr>        <td>0</td>        <td>0</td>        <td>0</td>      </tr>      <tr>        <td>0</td>        <td>0</td>        <td>0</td>      </tr>    </tbody>  </table></body>
</html>

How to rotate text and pin to the right bottom corner?

How can I fix it?

Replace:

transform: rotate(-90deg) translate(0, -100%);
transform-origin: 0 0;

With:

transform: rotate(-90deg) translate(100%, 0);
transform-origin: right bottom;

Why is that?

transform-origin, it is the original position of the element itself before any transformation, and not the parent.
translate(X, Y), X is for the horizontal axis, Y is for the vertical axis, by default.
When you combine rotate() then translate(X, Y), the axis of X and Y could be no longer horizontal and vertical, the directions are decided by the rotation value.

In following example, it pins the rotated text to the right bottom corner.

.container {  position: relative;  width: 200px;  height: 200px;  border: 1px solid;}
.container:before {  position: absolute;  right: 0;  bottom: 0;  content: "some text content";  transform: rotate(-90deg) translate(100%, 0);  transform-origin: right bottom;}

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

How to rotate text in one line with html and bootstrap?

Very easy - just add classes and non-breaking spaces:

<th height="200" style="width: 390px;" class="rotated">Point Description</th>   
<th class="rotated"><p>Controller Address</p></th>
<th class="rotated"><p>Module Address</p></th>
<th class="rotated"><p>Point Address</p></th>

And in CSS:

.rotated {
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
    transform: rotate(270deg);
}

CSS Rotate Text Vertical - Extra Space on both sides

You may try to use writing-mode .

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

https://codepen.io/gc-nomade/pen/rGJGzQ?editors=1100

.rotate {  writing-mode:vertical-rl;  transform:scale(-1);  width:50px;  margin-right:50px;}
body {  display:flex;  align-items:flex-end; }

<div style="display:inline-block; position:relative;" class="rotate">  <span style="displock;width:100%;font-size: 55px;color: #222222;opacity: 0.15;white-space: nowrap;">BACKGROUND</span>  <span style="display:block;width:100%;font-size: 45px;color: #222222;text-align:center;">TITLE</span>
</div>Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element