旋转文本，并在CSS中对齐？

旋转然后将文本对齐到某些内容的侧面的首选解决方案是什么？旋转文本，并在CSS中对齐？

<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或类似的东西，但有没有更好的方法？

来源

2013-05-29 dan2k3k4

I think that this is what you are going for，但您可以使用transform-origin（根据需要使用相关的供应商前缀）更改转换源。这情景，但在你的情况：

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

来源

2013-05-29 23:31:45

但现在的文本翻转：> –

@AndreaLigios导致你需要把所有的'-browser -specifics' –

@AndreaLigios哦，我以为那是你想要的。这个怎么样？ http://jsfiddle.net/ExplosionPIlls/nVtpz/2/ –

enter image description here

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

来源

2013-05-29 23:52:09

旋转文本，并在CSS中对齐？

回答

相关问题