CSS3转换属性不适用于响应式导航栏[重复]答案

【问题标题】：CSS3 transform property not working for responsive navbar [duplicate]CSS3转换属性不适用于响应式导航栏[重复]
【发布时间】：2019-11-15 14:00:06
【问题描述】：

我找到了一篇关于此的现有文章，但给出的解决方案不适用于我的项目。我一直在尝试创建一个响应式导航栏，并为小屏幕创建了一个汉堡菜单，当应用 .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);
}

我做错了什么？

【问题讨论】：

你为什么要这样堆叠css标签？
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您已经提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website OR off-site example doesn't work can I just paste a link。
@Paulie_D 和昨天的芽一样，这个链接是一个sn-p。没有特定链接要求将其发布在堆栈 sn-p 中。
抱歉我马上编辑
@Laif Nope...code 必须是 IN THE QUESTION 才能使用。它不一定是片段，但它仍然必须在问题中。

标签： html css navbar responsive hamburger-menu

【解决方案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 的类在同一个元素上。

在类之间放置空格意味着该类不在同一个元素上。

【讨论】：