在方框内旋转居中矩形的问题
在方框内旋转居中矩形的问题
提问于 2019-06-25 00:32:09
我打算做一个动画汉堡包按钮。首先，我在盒子里做了长方形。如果矩形在框中居中旋转，则矩形不会正确旋转。为了测试，我将其中一个矩形居中并旋转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>
回答 1
Stack Overflow用户
发布于 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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56740667
复制相关文章
相似问题