2D转换模块

2017-02-24  本文已影响0人  Miss一曦

一、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

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

上一篇下一篇

猜你喜欢

热点阅读