每当顶部和底部栏旋转时，它都不会以中间为中心。我怎样才能解决这个问题？ 我希望这 3 个条从汉堡形状形成一个 X 形状，但是当动画开始时，底部和顶部的条在旋转时会偏离中心。
HTML
<!DOCTYPE HTML>
<html>
<head>
<!-- Source: TheDudeofDC -->
<!-- Assistance: Jonah -->
<title>Menu Icon | UnbloPlus</title>
<link rel = "stylesheet" href = "C:\Users\20059971\Menu Code\Menu Button v3\menu-button-v3-styles.css"></link>
<script>
function toggleState(target) {
target.classList.toggle("animate");
}
</script>
</head>
<body>
<div id = "menu-btn" onclick = "toggleState(this)">
<div id = "menu-icon" class = ""></div>
</div>
</body>
<html>
CSS
:root {
--btn-size: min(8vh, 8vw);
--bar-height: calc(var(--btn-size) / 5);
--margin-top: calc(var(--bar-height)*2);
--margin-bottom: calc(var(--bar-height)*-2);
--animation: 1s;
--anim-half: calc(var(--animation)/2);
--anim-func: ease-in-out;
--btn-color: #929292;
}
body {
height: max-content;
width: max-content;
margin: 5%;
}
#menu-btn {
height: var(--btn-size);
width: var(--btn-size);
display: flex;
align-items: center;
cursor: pointer;
}
#menu-icon, #menu-icon::before, #menu-icon::after {
height: var(--bar-height);
width: var(--btn-size);
background-color: var(--btn-color);
position: absolute;
transform-origin: center;
}
#menu-icon {
transition:
rotate var(--animation) var(--anim-func) 0.00s;
}
#menu-icon::before {
transition:
translate var(--anim-half) var(--anim-func) var(--anim-half),
rotate var(--anim-half) var(--anim-func) 0.00s;
content: "";
transform: translateY(var(--margin-top));
}
#menu-icon::after {
transition:
translate var(--anim-half) var(--anim-func) var(--anim-half),
rotate var(--anim-half) var(--anim-func) 0.00s;
content: "";
transform: translateY(var(--margin-bottom));
}
.animate #menu-icon {
transition:
rotate var(--animation) var(--anim-func) 0.00s;
rotate: 360deg;
}
.animate #menu-icon::before {
transition:
translate var(--anim-half) var(--anim-func) 0.00s,
rotate var(--anim-half) var(--anim-func) var(--anim-half);
translate: 0px var(--margin-bottom);
rotate: 45deg;
}
.animate #menu-icon::after {
transition:
translate var(--anim-half) var(--anim-func) 0.00s,
rotate var(--anim-half) var(--anim-func) var(--anim-half);
translate: 0px var(--margin-top);
rotate: -45deg;
}
我尝试了每行的transform-origin: center，但它不起作用。我希望它以原件的中间为中心旋转。
我会考虑一个稍微不同的想法并简化你的代码，如下所示：
function toggleState(target) {
target.classList.toggle("animate");
}:root {
--btn-size: 20vmin; /* no need to use min between vh and vw, vmin will do it for you */
--bar-height: calc(var(--btn-size) / 5);
--animation: 1s;
--anim-half: calc(var(--animation)/2);
--anim-func: ease-in-out;
--btn-color: #929292;
}
#menu-btn {
height: var(--btn-size);
aspect-ratio: 1;
border: none;
background: /* the background will create the middle bar */
linear-gradient(var(--btn-color) 0 0)
50%/100% var(--bar-height) no-repeat;
position: relative;
transition:
rotate var(--animation) var(--anim-func),
background-size 0s var(--anim-half);
}
#menu-btn::before,
#menu-btn::after {
content:"";
position: absolute;
inset-inline: 0;
height: var(--bar-height);
background-color: var(--btn-color);
transition:
translate var(--anim-half) var(--anim-func) var(--anim-half),
rotate var(--anim-half) var(--anim-func);
}
#menu-btn::before { top: 0}
#menu-btn::after { bottom: 0}
#menu-btn.animate{
rotate: 360deg;
background-size: 0% var(--bar-height);
}
#menu-btn.animate::before,
#menu-btn.animate::after {
transition:
translate var(--anim-half) var(--anim-func),
rotate var(--anim-half) var(--anim-func) var(--anim-half);
}
#menu-btn.animate::before {
rotate: 45deg;
translate: 0 calc((var(--btn-size) - var(--bar-height))/2);
}
#menu-btn.animate::after {
rotate: -45deg;
translate: 0 calc((var(--bar-height) - var(--btn-size))/2);
}
body {
margin: 50px;
}<button id="menu-btn" onclick="toggleState(this)"></button>