首页 > Web开发 > 详细

CSS3 2D转换模块

时间:2017-07-03 11:20:49      阅读:285      评论:0      收藏:0      [点我收藏+]

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转换模块

原文:http://www.cnblogs.com/IceSnova/p/7109644.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!