我对 html 和 css 比较陌生，所以如果我的代码草率和/或冗余，我提前道歉。
http://jsfiddle.net/t16uf9sv/1/
从链接的 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);
}
我开始失去理智试图解决这个问题，所以如果有人能以任何方式提供帮助，我将不胜感激。
最佳答案
问题是您告诉它简单地旋转 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%;
它会完全满足您的需求:)
.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%;
}
关于html - <div> 没有旋转到我想要的位置的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31817585/