CSS3變換旋轉90度不工作

Question

問題：

每一個「李」的標籤不來一個接一個（從左上固定）。相反，它從左至右流...

我的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)的120像素應根據你的CSS您的需求，因爲它是不同的佈局的變化和水平轉換的列表中設置。

更新：我以-webkit-transform-origin屬性，這將允許您設置哪些轉動你的元素，並且還設置margin-left爲妥善安置原點更新的代碼。它可以有效地處理任意數量的<li>元素。您可以在下面的鏈接中查看新代碼。

不要在檢查工作代碼：http://jsfiddle.net/shubhanshumishra/qhS6r/