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属性怎么用的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

使用html和css的新特性实现响应式布局

css中如何定义使用变量

css如何设置字体下划线

css max-height属性怎么用

聊聊css 与 js 是如何阻塞 dom 解析和渲染的

css背景如何设置透明度

详解css3+svg滤镜实现不规则边框的方法

css怎么更改超链接颜色

css怎样设置图片之间的间隔

css怎么设置文本框宽度

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




标签：

打赏

取消

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

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

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

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

相关推荐

评论

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