css transform-origin属性怎么用

2020-07-23 08:09:40

定义和用法

transform-origin 属性允许您改变被转换元素的位置。

2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。

注释:该属性必须与 transform 属性一同使用。

实例

设置旋转元素的基点位置:

div{transform: rotate(45deg);transform-origin:20% 40%;-ms-transform: rotate(45deg); /* IE 9 */-ms-transform-origin:20% 40%; /* IE 9 */-webkit-transform: rotate(45deg);/* Safari 和 Chrome */-webkit-transform-origin:20% 40%;/* Safari 和 Chrome */-moz-transform: rotate(45deg);/* Firefox */-moz-transform-origin:20% 40%;/* Firefox */-o-transform: rotate(45deg);/* Opera */-o-transform-origin:20% 40%;/* Opera */}

语法

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

0c0d27ad78a85032cf2c13ecd691845.png