<div> 无法旋转到我想要的位置的问题答案

【问题标题】：Trouble With a <div> Not Rotating Where I Want It To<div> 无法旋转到我想要的位置的问题
【发布时间】：2015-08-05 04:14:23
【问题描述】：

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

http://jsfiddle.net/t16uf9sv/1/

从链接的小提琴中可以看出，我正在制作一个交互式菜单按钮，该按钮最终会展开以显示导航网站的提示。不过现在，我只是试图让加号的垂直条在单击时旋转 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);
}

我开始失去理智试图弄清楚这一点，所以如果有人能以任何方式提供帮助，我将不胜感激。

【问题讨论】：

标签： html css css-transitions css-transforms

【解决方案1】：

问题是你告诉它简单地旋转 90 度，这就是它正在做的事情。当它旋转时，它失去了top:50%和left:50%的位置，你需要在你的:active sn-p中重新定义它们：

.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%;
    }

【讨论】：

【解决方案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>

【讨论】：

【解决方案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;
}

我估计了这个，所以它和你的差不多。同样，这种方式是相对于屏幕尺寸的（尽管它足够小，实际上并不重要）。

【讨论】：