css3旋转中心无效 |css类名属性

.box {
width: 100px;
height: 100px;
background-color: red;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

上面的代码会让一个宽高为100px的红色正方形旋转了45度，但是如果大家设置旋转中心，会发现并不是按照大家的预期旋转的。

.box2 {
width: 100px;
height: 100px;
background-color: blue;
-webkit-transform: rotate(45deg);
-webkit-transform-origin: 50% 50%;
transform: rotate(45deg);
transform-origin: 50% 50%;
}

以上的代码中，大家在旋转蓝色正方形的时候，设置了旋转中心为正方形中心（50% 50%），但是却仍然按照左上角作为旋转中心来旋转，这是为什么呢？

其实原因很简单，CSS3旋转的旋转中心默认是元素的左上角坐标，如果想要修改旋转中心，需要通过transform-origin属性来设置，但是对于一些元素（例如块状元素）来说，设置旋转中心并不能起到预期的效果。

解决这个问题的方法有两种，一种是使用绝对定位的方式来对元素进行旋转，另一种是将元素包裹在容器中再进行旋转，下面是两种方法的代码。

.parent {
position: relative;
}
.box3 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}

.parent2 {
transform-origin: 50% 50%;
transform: rotate(45deg);
}
.box4 {
margin: auto;
width: 100px;
height: 100px;
background-color: green;
}

通过以上两种方式，大家就可以有效地解决CSS3旋转中心无效的问题，实现更加自由灵活的旋转效果。