css 旋转之后位置不变

CSS中可以使用transform的rotate属性来实现元素的旋转，但是因为旋转会改变元素的位置，所以在某些情况下，我们希望元素可以旋转但是位置不变。这时候可以使用一些技巧来实现。

.box {
    position: relative;
    transform: rotate(45deg);
    transform-origin: top left;
    left: 50px;
    top: 50px;
}
.box:before {
    content: '';
    display: block;
    padding-top: 100%;
}
    .box >
* {
    position: absolute;
    transform: rotate(-45deg);
    transform-origin: top left;
    left: -50px;
    top: -50px;
}
    

上面这段代码演示了一种方式来实现旋转之后位置不变的效果。我们通过在.box元素里添加一个高度为100%的:before伪元素，使得.box元素可以保持原有的高度。然后通过在.box > * selector里设置transform: rotate(-45deg)来反向旋转并重定位子元素（*-通用选择器匹配所有的子元素）。

注意这种技巧有时候并不适用，因为在不同的浏览器和设备上，子元素的位置和大小可能会略有差异。同时，也不建议过度使用这种技巧而忽略了代码的可读性和易维护性。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！