3

CSS3 コードを使用してテキストを回転させようとしていますが、認識されないと思いますか?

CSS コード:

.menu {
    background-image:url('button.jpg');
    cursor: pointer;
    width: 61px;
    height: 205px;

    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: rl-tb;
}

HTML コード:

<div id="menu-box">
    <a class="menu" href="#" >HOME</a>
    <a class="menu" href="#" >MYSELF</a>
    <a class="menu" href="#" >PORTFOLIO</a>
    <a class="menu" href="#" >CONTACT ME</a>        
</div>

問題が何であるかわかりません。何か不足していますか？

4

2 に答える 2

4

クラスが適用されるタグは要素<a>です。変換を適用するには、それらがレベル要素である必要があります。.menuinlineblock

追加display: block;すると、変換が正しく適用されることがわかります。

http://jsfiddle.net/RvrBM/

display: inline-block;または、要素を回転させてインライン配置のままにするために使用することもできます。

http://jsfiddle.net/g5BRT/

さらに、上記のコメントで Pavlo が指摘したように、コードにプレフィックスのない変換がありません。次のようになります。

-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
于 2013-09-18T16:31:11.167 に答える