Question

我打算制作一个动画汉堡包按钮。首先，我在方框中制作了矩形。如果矩形在框中中心旋转，则矩形不能正确旋转。为了进行测试，我将其中一个矩形居中并旋转了90度。但是矩形不适合放在盒子里。如何正确旋转矩形框的中心？

const http=require('http');
const fs=require('fs');

function f1( ()=>{console.log("three");})
{
  console.log("two");
}

const server=http.createServer((req,res)=>{
  console.log("one");
  f1();


});


server.listen(9800);

*,
*::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;
}

Answer 1

您可以旋转包装器.boxes而不是.boxes .box__center，就像

.boxes {
  /* ... */
  transform: rotate(90deg);
}

或者您可以使用CSS calc()完全集中元素，就像：

.boxes .box__center {
  top: calc(50% - 1.5em);
  transform: rotate(90deg);
  background-color: #fd7e14;
}

CSS在盒子内旋转居中矩形的问题

1 个答案: