CSS 3: Text Rotation Bug

Rotated text is breaking

I resolved this problem, thanks to showdev, by using

-webkit-transform: rotate(45deg) translate3d( 0, 0, 0);

That's because fonts are antialiased by default in chrome, and using translated3d(0,0,0) smoothens them.

More here : Wonky text anti-aliasing when rotating with webkit-transform in Chrome

css transition transform rotate bug

because it a square, when your on the edge inside as soon as it starts to rotate your right away on the outside . rotation goes on/off every time the mighty mice hovers it and don't anymore .

As a work around, you could shape it as a round and draw inside a square to avoid this :

possible example to start from

<!DOCTYPE html>
<html>
<head>
<style> 
div {
box-sizing:border-box;
  width: 150px;
  height: 150px;
  padding:25px;
  margin:-20px 0 0  -20px;
  border-radius:50%;
/* background color rgba(0,0,0,0.001) added so it is not totaly transparent and can catch the hover some browsers might need it  ... */
  background: linear-gradient(red,red) rgba(0,0,0,0.001) center center/ 70% 70% no-repeat;
  transition:  1s;
}

div:hover {
  width: 250px;
  height: 250px;
  padding:50px;
  margin:-35px  0 0 -35px;
  transform: rotate(360deg);
}
</style>
</head>
<body>
<br>

<div>
    <p>Hover</p>
</div>

</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 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

CSS3: Transition hover and animation rotation bug

You can only apply one transform rule at a time on a single element. If you want to rotate and scale an element, I suggest to rotate the parent element and scale the element itself.

#homeMim  {
    position: absolute;
    height: 200px;
    -webkit-animation: spin 40s linear infinite;
    -moz-animation: spin 40s linear infinite;
    animation: spin 40s linear infinite;        
}

#homeMim img { 
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
}

#homeMim img:hover { 
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    transform: scale(1.5); 
}

 @-moz-keyframes spin {
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-webkit-keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        transform:rotate(360deg);
    }
}

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!