變換不靈塊範圍元素

我只是修改一個朋友的網站HERE，基本上它具有以下菜單：變換不靈塊範圍元素

現在的CSS菜單代碼看起來像這樣：

HTML：

<a class="" href=""> 
    <span class="hamburger">     
     <span></span> 
     <span></span> 
     <span></span> 
    </span> 
</a>

裏面的0123的span的類有block的顯示特性，但是當我嘗試應用以下樣式：

.hamburger > span:nth-of-type(1) { 
     transform: rotateX(45deg); 
    }

變換不適用。爲什麼？我知道，HTML元素需要顯示inline-block或block以便對其進行轉換。

來源

2017-03-04 Alexander Solonik

但這是就是工作......僅僅使用並不明顯'rotate'，而不是'rotateX'，你會看到 – LGSon

或者使用'rotateZ' :) – Abhitalks

它的工作原理，對水平線條

.hamburger { 
 
    font-size: 500%; 
 
} 
 

 
.hamburger:hover>span:nth-of-type(1) { 
 
    transform: rotateX(45deg); 
 
} 
 

 
span:nth-of-type(1) { 
 
    background-color: green; 
 
    transition: 1s; 
 
} 
 

 
span span { 
 
    display: inline-block; 
 
}

<a class="" href=""> 
 
    <span class="hamburger">     
 
    <span>1 -</span> 
 
    <span>2</span> 
 
    <span>3</span> 
 
    </span> 
 
</a>

來源

2017-03-04 15:40:25

當沒有問題發帖時，我們投票關閉 – LGSon

@LGSon英語是我的外語。我更容易給代碼比言傳 –

我已經發布的話，如評論，有這樣一個問題沒有問題，它的工作原理，所以無需發帖回答說，它的工作原理 – LGSon

變換不靈塊範圍元素

回答

相關問題