2D转换模块

一、transform属性取值:

作用:该属性允许我们对元素进行移动、旋转、缩放

1.translate(100px, 0px) 移动

第一个参数:水平方向
第二个参数:垂直方向

2.rotate(45deg) 旋转

deg是单位, 代表多少度

3.scale(1.5,1.5) 缩放

第一个参数:水平方向
第二个参数:垂直方向
注意点:
1.如果取值是1, 代表不变
2.如果取值大于1, 代表需要放大

  1. 如果取值小于1, 代表需要缩小
    4.如果水平和垂直缩放都一样, 那么可以简写为一个参数
    5.如果需要进行多个转换, 那么用空格隔开
    6.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的

二、transform-origin属性取值

作用:设置形变中心点

1.transform-origin:200px 0px;

第一个参数:水平方向
第二个参数:垂直方向
注意点
取值有三种形式: 具体像素 、百分比 、特殊关键字

三、perspective

透视,显示 近大远小的效果
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容