Question

我对html和css相对较新，所以如果我的代码草率和/或多余，我会提前道歉。

从链接的小提琴中可以看出，我正在制作一个交互式菜单按钮，最终会扩展以显示导航网站的提示。但就目前而言，我一直试图让加号的垂直条旋转90度，以便在点击时形成负数。 [+] ---＆gt; [ - ]。

当尝试使用附加的代码执行此操作时，元素不会到达我想要的位置。

我有一种感觉，问题可能在于我如何将广场（。垂直）中的条形元素（.vertical，.horizontal）居中。

HTML：

<body>
    <div class="nav">
        <a href="#"><div class="menu">
        <div class="plus">
            <div class="vertical"></div>
            <div class="horizontal"></div>
        </div>
        </div></a>
    </div>
</body>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    position: relative;
}

body {
    background: #212121;
}

.nav {
    position: fixed;
    margin-top: 326px;
    margin-right: 965px;
    margin-left: 250px;
}

.menu {
    height: 50px;
    width: 50px;
    border: 2.5px solid #ffffff;
    -o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition:.2s;
}

.plus {
    position: relative;
    padding: 25px;
}

.vertical {
    background: #ffffff;
    height: 25px;
    width: 2.5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition:.2s;
}

.horizontal {
    background: #ffffff;
    height: 2.5px;
    width: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition:.2s;
}

.menu:hover {
    background: #ffffff;
}

.menu:hover .vertical, .menu:hover .horizontal {
    background: #212121;
}

.menu:active .vertical {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

我开始试图弄清楚这一点，所以如果有人能以任何方式提供帮助，我会非常感激。

Answer 1

问题在于你告诉它只需旋转90度，这就是它正在做的事情。当它旋转时，它会失去top:50%和left:50%的位置，您需要重新定义:active代码段中的内容：

.menu:active .vertical {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

只需添加：

 top: 25%;
  left: 46%;

它将完全符合您的需要：）

<强> Working Fiddle Here

 .menu:active .vertical {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        top: 25%;
        left: 46%;
    }

Answer 2

执行此操作的一种方法是添加opacity: 0，并更改top下的css中的left和menu:active .vertical属性：

＆＃13;

* {
    margin: 0;
    padding: 0;
}

body {
    position: relative;
}

body {
    background: #212121;
}

.nav {
    position: fixed;
    margin-top: 10px;
    margin-right: 965px;
    margin-left: 250px;
}

.menu {
    height: 50px;
    width: 50px;
    border: 2.5px solid #ffffff;
    -o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition:.2s;
}

.plus {
    position: relative;
    padding: 25px;
}

.vertical {
    background: #ffffff;
    height: 25px;
    width: 2.5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition:.2s;
}

.horizontal {
    background: #ffffff;
    height: 2.5px;
    width: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition:.2s;
}

.menu:hover {
    background: #ffffff;
}

.menu:hover .vertical, .menu:hover .horizontal {
    background: #212121;
}

.menu:active .vertical {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    top: 25%;
    left: 40%;
    opacity: 0;
}

＆＃13;

<body>
    <div class="nav">
        <a href="#"><div class="menu">
        <div class="plus">
            <div class="vertical"></div>
            <div class="horizontal"></div>
        </div>
        </div></a>
    </div>
</body>

＆＃13;

Answer 3

问题是旋转是相对于

之前的位置

transform:translate(-50%, -50%);

你曾经把它放在中心（如果你移除它，你会注意到它正确旋转但在错误的地方）。

我想说这里做的最好的事情不是在定位中使用translate，因为大小是固定的。我只将它用于可变大小的元素。

相反，只需删除变换，将尺寸设置为固定尺寸，如下所示：

.vertical {
    background: #ffffff;
    height:50%;
    top:25%;
    position: absolute;
    width:5%;
    left:47.5%;
    -o-transition:.2s;
    -ms-transition:.2s;
    -moz-transition:.2s;
    -webkit-transition:.2s;
    transition:.2s;
}

我估计这是和你的差不多。这种方式也与屏幕尺寸有关（虽然它足够小，实际上并不重要）。

麻烦的<div>不能旋转到我想要的地方

3 个答案: