是否可以在 CSS3 中指定左上角 (0%, 0%) 的原点用于缩放,并指定不同的原点(中心)用于旋转?如果有帮助,我只使用 webkit。
我目前正在使用转换列表(即 -webkit-transform: scale(newScale) rotate(newRotate)
但似乎无法更改中间路径的原点。有没有更好的方法来看待这个?目前,如果我缩放一个对象并以默认中心为原点旋转它,元素的位置现在是关闭的,所以当你拖动元素时,光标仍然在元素的左上角,而它应该是在中心。将原点更改为中心以进行缩放可以解决此问题,但会带来旋转和翻转方面的新问题。
最佳答案
通过如下创建父/子关系找到了解决问题的好方法:
<div class="container">
<img src="" />
</div>
我现在可以设置两个类如下:
.container {
-webkit-transform-origin: 0% 0%;
-webkit-transform: scale(0.5);
}
.container img {
-webkit-transform-origin: 50% 50%;
-webkit-transform: rotate(45deg);
}
这将完全按照我的要求进行:以左上角为原点进行缩放,然后以原点为中心进行旋转。瞧!
关于CSS3 转换 : Multiple Origins?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8947106/