transform-origin兼容各种浏览器写法

Wxinin

已于 2023-05-08 16:01:36 修改

阅读量622

点赞数

文章标签： firefox safari chrome

于 2023-04-26 12:56:21 首次发布

本文链接：https://blog.csdn.net/weixin_44283589/article/details/130383658

版权

本文介绍了CSS3中用于控制变换原点的`transform-origin`属性在不同浏览器（Webkit,Firefox,IE,Opera）中的前缀写法，以及x轴和y轴的可能取值，包括left,center,right,top,bottom,length,percentage，并强调了单一值时的默认设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Webkit内核（Chrome、Safari等）：

-webkit-transform-origin: x-axis y-axis;

Firefox浏览器：
-moz-transform-origin: x-axis y-axis;

IE浏览器：
-ms-transform-origin: x-axis y-axis;

Opera浏览器
-o-transform-origin: x-axis y-axis;

标准写法：
transform-origin: x-axis y-axis;

x-axis、y-axis可以是以下取值：
left
center
right
top
bottom
length

percentage（如：50%）
需要注意的是，如果只设置一个值，则另一个值会默认设置为50%。同时，如果只设置一个关键字（如：left、top等），则会被解析为transform-origin:left top 50%;