Вращение текста и выравнивание его в CSS?

Question

Какое предпочтительное решение для поворота, а затем выравнивание текста в сторону некоторого содержимого?

Пример: http://jsfiddle.net/nVtpz/

<style> 
.wrapper { 
    width: 100px; 
    height: 100px; 
    border: 1px solid #009; 
    margin: 50px; 
} 
.text 
{ 
    border: 1px solid #900; 
     -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
     -ms-transform: rotate(-90deg); 
     -o-transform: rotate(-90deg); 
      transform: rotate(-90deg); 

} 
.image { 
    border: 1px solid #090; 
} 
</style> 

<div class="wrapper">  
    <div class="text"> 
     Text to rotate 
    </div> 
    <div class="image"> 
     <img src="http://lorempixel.com/100/100"/> 
    </div> 
</div> 

Я хочу, чтобы текст, который должен быть выровнен рядом с нижнего левого угла изображения (но не на верхней части изображения, то есть без поплавка)

Я думаю, Я мог бы использовать position: relative; bottom: 0px или что-то подобное, но есть ли лучший способ?

Answer 1

I think that this is what you are going for, но вы можете изменить происхождение преобразования, используя transform-origin (с соответствующими префиксами поставщика при необходимости). Это ситуативно, но в вашем случае:

transform: rotate(90deg) translateX(100%); 
transform-origin: 100% 100%; 

Answer 2

.wrapper { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
.text{ 
 
    position: absolute; 
 
    width: 100%; 
 
    background:rgba(0,0,0,0.5); 
 
    color:#fff; 
 
    -webkit-transform: rotate(270deg) translateX(-100%); 
 
      transform: rotate(270deg) translateX(-100%); 
 
    -webkit-transform-origin: 0px 0px; 
 
      transform-origin: 0px 0px; 
 
} 
 
.image img{ 
 
    vertical-align:middle; 
 
}

<div class="wrapper">  
 
    <div class="text"> 
 
    Text to rotate 
 
    </div> 
 
    <div class="image"> 
 
    <img src="http://lorempixel.com/100/100"/> 
 
    </div> 
 
</div>