首页 > 代码库 > CSS3 2D转换模块
CSS3 2D转换模块
2D转换模块
属性:transform
方法:
rotate() 元素顺时针旋转给定的角度,负值时,元素将逆时针旋转,单位deg。
有rotateX、rotateY、rotateZ,默认Z
translate() 元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数。
有translateX,translateY
scale() 元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数。参数>1时,放大;参数<1时,缩小。
有scaleX,scaleY
注意点:
1.如果需要进行多个转换,那么用空格隔开
2.2D转换模块会修改元素的坐标系,所以旋转后在平移就不是水平平移了
例:transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
属性:transform-origin (形变中心点)
transform-origin : x y; x水平方向 y垂直方向
参数:具体像素(15px),百分比(15%),特殊关键字(right center bottom)
属性:perspective
perspective:150px; 像素表示距离
透视:近大远小 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面
CSS3 2D转换模块
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。