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;

旋转锚文本？

2 个答案: