html - 旋转父 div 时固定文本

Question

请看下面的HTML

<div id="parent">
   <p>something</p>
</div>

当我们旋转div时，显然里面的文字也旋转了，我们能阻止吗？？ 旋转 div 但不旋转其中的内容...

Answer 1

直截了当的方法，只需向后旋转内部元素。

http://jsfiddle.net/zpwchqpf/

#parent {
        -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
    transform: rotate(30deg);
    background-color: red;
    width: 100px;
    height:100px;
}
#parent p {
    color: blue;
        -ms-transform: rotate(-30deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Chrome, Safari, Opera */
    transform: rotate(-30deg);

}