围绕带DIV的转换元素

Question

我想旋转DIV中的文本元素，但是在文本旋转后，我的div折叠就像是空的一样。是否有一个CSS技巧，让我的DIV仍然围绕着我的内在元素？

这里是我的代码如下所示：

li { 
 
    border: 1px solid black; 
 
    list-style-type: none; 
 
} 
 

 
p { 
 
    display: inline-block; 
 
    transform-origin: right bottom; 
 
    transform: rotate(270deg); 
 
}

<li> 
 
    <div> 
 
    <p>Some Text</p> 
 
    </div> 
 
</li> 
 

 
<li> 
 
    <div> 
 
    <p>Some Text</p> 
 
    </div> 
 
</li>

Answer 1

相反变换：旋转（xdeg）;您可以使用writing-mode来实现此目的。

形式语法

水平-TB | vertical-rl | vertical-lr | sideways-rl |侧身-LR

您的代码重新审视：http://codepen.io/gc-nomade/pen/MpNBMa以下

li { 
 
    border: 1px solid black; 
 
    list-style-type: none; 
 
} 
 

 
p { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
p.rotate { 
 
    writing-mode: vertical-rl; 
 
    /* for obsolete safari old win, add vendor prefix -webkit- */ 
 
    writing-mode: tb-rl; 
 
    /* IEs */ 
 
    /* writing-mode:sideways-lr; could be the one */ 
 
    /* use scale() eventually untill sideways-lr is working everywhere */ 
 
    transform: scale(-1); 
 
    padding: 1em; 
 
    background: yellow; 
 
    /* show me */ 
 
    max-height:10em; /* will force text to break on several lines if too long */ 
 
}

<ul> 
 
    <li> 
 
    <div> 
 
     <p class="rotate">Some Text</p> 
 
     <p>aside <br/>any <br/>other <br/>text <br/>aside <br/>any <br/>other <br/>text </p> 
 
    </div> 
 
    </li> 
 

 
    <li> 
 
    <div> 
 
     <p class="rotate">Some more Text<br/>over 2 lines</p> 
 
     <p>aside any other text</p> 
 
    </div> 
 
    </li> 
 
    <li> 
 
    <div> 
 
     <p class="rotate">Some more Text over 10em of height at the most</p> 
 
     <p>aside any other text</p> 
 
    </div> 
 
    </li> 
 
</ul>

注：MDN说：

这是一个实验性的技术 因为这项技术的规范尚未稳定，请检查兼容性适用于各种浏览器的功能表。还请注意，随着规范的变化，实验技术的语法和行为在未来版本的浏览器中可能会发生变化。

看看这里：http://caniuse.com/#search=writing-mode