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;