css3旋转导致位置变化 |css3 ie8兼容js

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

在上面的代码中，大家定义了一个div元素，它的class为box。大家将它的定位设为absolute，并且设置它的left和top为50%，这样就可以使它在页面的中间位置。接着大家使用了transform属性来对元素进行旋转，同时还在transform属性中添加了translate函数来使元素在旋转后不会发生位置变化。在这个例子中，大家将元素向左移动自身宽度的50%（即translateX(-50%)），向上移动自身高度的50%（即translateY(-50%)），以使元素在旋转后仍然保持在页面中央。

除了添加translate函数，大家还可以通过设置元素的transform-origin属性来改变元素旋转的中心点，从而避免位置变化。比如，大家可以将元素的transform-origin设置为中心点（transform-origin: center），这样在旋转时，元素的中心点就会始终保持不变。

总之，通过添加translate函数和调整transform-origin属性，大家可以很容易地解决旋转导致位置变化的问题。如果你在网页设计中遇到了这一问题，不妨尝试一下这些方法。