css transform-origin属性怎么用

PHP中文网 JavaScript

本文摘自PHP中文网，作者silencement，侵删。

定义和用法

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

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

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

实例

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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 */

}

语法

1

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

0c0d27ad78a85032cf2c13ecd691845.png

以上就是css transform-origin属性怎么用的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

css如何设置边框阴影

如何利用css实现放大缩小关闭效果

css怎么让图片旋转90度

html5实践-使用css装饰图片画廊的代码分享（二）

css如何设置元素水平垂直居中显示

jquery怎么添加css

css中px和pt的区别是什么

什么是css盒子模型？

css无法显示图片怎么办

css如何让鼠标放上时的小手样式

更多相关阅读请进入《css》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...