-webkit-transform 旋转不带浮动属性答案

【问题标题】：-webkit-transform rotate without float attribute-webkit-transform 旋转不带浮动属性
【发布时间】：2013-11-08 14:41:52
【问题描述】：

我正在尝试使用双直角引号 (&raquo;) 作为下拉指示符。我让它在我的导航中工作，其中分配了一个float: right;。然而，在导航之外，当我没有分配float: 时，它不会旋转。我正在使用 jQuery 和 CSS3 旋转箭头，方法是将类 down 添加到包含直角引号的 <span> 元素中。

这是添加用于旋转箭头的 down css 类：

.drop-arrows.down {
    /* FF Chrome Opera etc */
    -webkit-transform: rotate(90deg) !important; 
    -moz-transform: rotate(90deg) !important;
    -o-transform: rotate(90deg) !important;
    /* IE */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

该类是在通过 jQuery 激活下拉菜单时添加的。唯一的问题是，如果没有将float 添加到箭头容器中，这将不起作用，这让我非常困惑。

这是包装箭头的 HTML：

<a id='filter-trigger' href='javascript:void(0);'>FILTERS <span class='drop-arrows'>&raquo;</span></a>

-webkit-transform 是否需要浮点数才能工作？我做错了吗？

【问题讨论】：

尝试位置：相对；
在哪个元素上？我将它应用于.drop-arrows 和.drop-arrows.down 类，但没有结果。
对不起，这是绝对的。添加答案

标签： jquery css webkit transform

【解决方案1】：

你需要设置绝对位置

.drop-arrows {
    position: absolute;
    /* FF Chrome Opera etc */
    -webkit-transform: rotate(90deg) !important; 
    -moz-transform: rotate(90deg) !important;
    -o-transform: rotate(90deg) !important;
    /* IE */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

【讨论】：