css中旋转中心设置 |css 星型

/*1.使用transform-origin*/
.box{
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
transform-origin: center center; /*设置旋转中心为元素中心*/
}
/*2.使用translate*/
.box{
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg) translate(-50%,-50%);
}
/*3.使用绝对定位*/
.parent{
position: relative;
width: 200px;
height: 200px;
}
.box{
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
background-color: red;
transform: rotate(45deg);
}

以上是常用的三种设置旋转中心的方法，可以根据具体情况选择合适的方法来实现旋转效果。