css3变换旋转90度不起作用

Question

问题：

每个“li”标签不是一个一个出现（从左上角固定）。相反，它是从左向右流动的……

我的 HTML 是：

<div class="fixed-button">
    <ul>
        <li><a href="#" title="">Contact Us</a></li>
        <li><a href="#" title="">nh;kjfwae ilfmnsdkl;</a></li>
    </ul>
</div>

而 CSS 是：

div.fixed-button{
    position: absolute;
    display: block!important;
    width: 0;
    height: 0;
    z-index: 90000;
    margin: 0;
    outline: 0;
    top: 200px;
}
div.fixed-button a{
    background: url("images/fix-bug-repeat.png") repeat 0 0;
    margin-left: -33px;
    height: auto;
    padding: 10px 14px;
    font: bold 13px/16px arial, sans-serif;
    color: white;
    text-align: center;
    -moz-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    white-space: nowrap;
    position: absolute;
    left: 0;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    border-bottom-width: 0;        
    margin-bottom: 20px;
    text-decoration: none;
}

我尝试了所有可能的方法。但不工作。请修复此错误。

Answer 1

您在错误的元素上应用了转换。而不是将它应用到每个 <a> 标记上，而是将它应用到整个 <ul>。

此外，为了使链接即使在水平情况下也能并排显示[在没有转换的情况下正常读取]，我们在<li> 标签上使用float: left;。

这里是完整的代码：

<div class="fixed-button">
    <ul>
        <li><a href="#" title="">Contact Us</a></li>
        <li><a href="#" title="">Shubhanshu Mishra</a></li>
        <li><a href="#" title="">SmexyyWeby</a></li>
        <li><a href="#" title="">SmexyyWeby</a></li>
    </ul>
</div>​

我刚刚添加了 webkit 转换，您可以为同一标签中的其他元素添加转换。

此外，您的 <a> 标记具有属性 position:absolute;，应将其删除以使链接正确显示。

这是我使用的最终 CSS：

div.fixed-button{
 position: absolute;
 display: block!important;
 z-index: 90000;
 margin: 0;
 outline: 0;
 top: 200px;
}

.fixed-button ul{
    -webkit-transform: scale(1) rotate(90deg) translate(0px, 0px);
    margin-left: 50px;
    -webkit-transform-origin: 0% 0 0;
}

div.fixed-button a {
    background-color: black;
    height: auto;
    padding: 10px 14px;
    font: bold 13px/16px arial, sans-serif;
    color: white;
    text-align: center;
    white-space: nowrap;
    text-decoration: none;
}

li{
    float: left;
}​

-webkit-transform: translate(0px, 120px) 中的 120px 应根据您的 css 需要设置，因为它会针对不同的布局进行更改并水平转换列表。

更新：我已经使用-webkit-transform-origin 属性更新了代码，这将允许您设置旋转元素的原点，并设置margin-left 以正确放置。它可以有效地处理任意数量的<li> 元素。您可以在下面的链接中查看新代码。

请检查工作代码：http://jsfiddle.net/shubhanshumishra/qhS6r/