转换不在块跨度元素上工作

Question

我刚刚修改了一个朋友网站 HERE ，基本上它有以下菜单：

现在css菜单的代码如下：

HTML：

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

span类中的.hamburger的显示属性为block，但当我尝试应用以下样式时：

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

未应用转换。为什么？我知道HTML元素需要显示inline-block或block才能对其进行转换。

Answer 1

它起作用，在水平线上不明显

.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>