transform-origin(变形原点)

简单的说transform-origin规定旋转的时候旋转的位置。transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。所以我们要规定下中心位置。原则如下:

top left | left top 等价于 0 0;

top | top center | center top 等价于 50% 0

right top | top right 等价于 100% 0

left | left center | center left 等价于 0 50%

center | center center 等价于 50% 50%(默认值)

right | right center | center right 等价于 100% 50%

bottom left | left bottom 等价于 0 100%

bottom | bottom center | center bottom 等价于 50% 100%

bottom right | right bottom 等价于 100% 100%

看起来很难懂简单的用一张图来说


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容