变换不灵块范围元素

我只是修改一个朋友的网站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

变换不灵块范围元素

回答

相关问题