我打算做一个动画汉堡包按钮。首先,我在盒子里做了长方形。如果矩形在框中居中旋转,则矩形不会正确旋转。为了测试,我将其中一个矩形居中并旋转90度。但是rectangle不能放在盒子里。怎样才能正确地旋转长方体的中心?
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
background-color: #272B30;
}
.wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
width: 100vw;
height: 100vh;
}
.boxes {
width: 15rem;
height: 15rem;
background-color: #fff;
position: relative;
}
.boxes .box {
display: block;
width: 15rem;
height: 3rem;
position: absolute;
}
.boxes .box__top {
top: 0;
background-color: #6f42c1;
}
.boxes .box__center {
top: 50%;
transform: translateY(-50%);
transform-origin: center center;
transform: rotate(90deg);
background-color: #fd7e14;
}
.boxes .box__bottom {
bottom: 0;
background-color: #5bc0de;
}
<div class="wrapper">
<div class="boxes">
<!-- <span class="box box__top"></span> -->
<span class="box box__center"></span>
<!-- <span class="box box__bottom"></span> -->
</div>
</div>
发布于 2019-06-25 03:03:59
您可以旋转包装器.boxes
而不是.boxes .box__center
,就像这样
.boxes {
/* ... */
transform: rotate(90deg);
}
或者您可以使用CSS calc()
来完全集中元素,就像这样:
.boxes .box__center {
top: calc(50% - 1.5em);
transform: rotate(90deg);
background-color: #fd7e14;
}
https://stackoverflow.com/questions/56740667
复制相似问题