问题
发现旋转中心在左上角,通过transform-origin修改无效。下面的代码默认一直围绕左上角黑色方块旋转
解决
控制旋转的位置出错了,本来应该是围绕content的中心进行旋转,但是content没有长宽,所以content默认在左上角,围绕中心旋转也就是在左上角。只需要给content的长宽一个合理的值就可以了,这里把注释代码打开即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.content {
position: absolute;
top: 300px;
left: 500px;
/* width: 300px;
height: 200px;
background-color: pink; */
transform: rotate(45deg);
}
.box {
position: absolute;
height: 5px;
width: 6px;
}
.box1 {
left: 0px;
top: 0px;
border: 1px solid #000;
}
.box2 {
left: 300px;
top: 200px;
border: 1px solid red;
}
.box3 {
left: 0px;
top: 200px;
border: 1px solid red;
}
.box4 {
left: 300px;
top: 0px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
</div>
</body>
</html>