<div> 没有旋转到我想要的位置的问题

Question

我对 html 和 css 比较陌生，所以如果我的代码草率 and/or 多余，我提前道歉。

如链接 fiddle 中所示，我正在制作一个交互式菜单按钮，该按钮最终会展开以显示导航站点的提示。不过现在，我一直在尝试让加号的垂直条在单击时旋转 90 度以形成减号。 [+] ---> [-]。

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

我感觉问题可能出在我如何在正方形 (.menu) 内将条形元素（.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，然后更改 menu:active .vertical 下 css 中的 top 和 left 属性：

* {
    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;
}

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

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> 没有旋转到我想要的位置的问题

Trouble With a <div> Not Rotating Where I Want It To

html

css

css-transitions

css-transforms