CSS3转换属性不适用于响应式导航栏

Question

我找到了关于此的现有文章，但是给出的解决方案不适用于我的项目。我一直在尝试创建一个响应式导航栏，并为小屏幕创建了一个汉堡菜单，当应用类.change时，它应该倾斜45度，但不起作用。

HTML

<div class="menu-toggle">
            <div class="bar change bar1"></div>
            <div class="bar bar2"></div>
            <div class="bar bar3"></div>
</div>

CSS

.navbar .menu-toggle {
    display: block;
    height: 100px;
    width: 100px;
    z-index: 1;
    align-items: center;
    margin-top: 60px;
}

.navbar .menu-toggle .bar {
    height: 5px;
    width: 30px;
    background: #333;
    color: #333;
    margin-top: 5px;
}

.navbar .menu-toggle .bar .change .bar1 {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

我在做什么错？

Answer 1

而不是：

.navbar .menu-toggle .bar .change .bar1 {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

您需要写：

.navbar .menu-toggle .bar.change.bar1 {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

因为类.bar .change .bar1在同一元素上。

在类之间放置空格表示该类不在同一元素上。