html - アンカー テキストを回転しますか?

Question

矢印を下向きに回転させようとしていますが、これが可能かどうかはわかりません

HTML

<a href="/test/">test <span id="rotate">&raquo;</span></a>

CSS

span#rotate{ 
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Answer 1

要素をインライン スパンのように動作させたいが、回転させたい場合は、 を使用する必要がありますdisplay: inline-block;。display: block;これにより、当然のように新しい行が強制されることはありません。

正しいコードは次のとおりです (jsFiddle: http://jsfiddle.net/joshnh/wZpP9/ ):

span#rotate{
    display: inline-block;
    *display: inline; /* Used to get IE 6 & 7 to behave */
    zoom: 1; /* Used to get IE 6 & 7 to behave */
    -webkit-transform: rotate(90deg); 
       -moz-transform: rotate(90deg); 
        -ms-transform: rotate(90deg); 
         -o-transform: rotate(90deg);  
            transform: rotate(90deg);
               filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0); 
}

Answer 2

block要素が機能するための要素である必要がありますrotate。

追加してみてください：

display:block;
width:10px;
height:10px;