css3学习之2D转换功能详解
|
CSS3提供了2D转换功能，能够对元素进行移动、缩放和转动等功能。 2D转换的属性名为transform，使用方法为transform:method(value)。 2D转换方法有translate、scale、rotate、skew、matrix，还有基于这些分支出的translateX、scaleY等。 这里，我将会介绍到以下转换方法： translate() rotate() scale() skew() 首先，我们先插入一个简单的html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Css3的2D转换</title> <style type="text/css"> *{ margin:0; padding:0; } #picture{ width：100%; height:500px; background:#ccc; } img{ margin:100px 0 0 100px; } </style> </head> <body> <div id="picture"> <img src=http://www.jb51.net/css/"mary.gif" alt="This is a picture" > </div> </body> </html> 这段代码我们可以实现在一个div里放一张图片，通过这张图片以便于向大家介绍以下方法。 1.translate（）方法：这个方法里可以有两个参数，中间用分号隔开，分别表示沿着X轴和Y轴移动的距离，这个距离是相对于该图片的移动距离，且向右为X轴的正方向，向下为Y轴的正方向。下面的代码表示将图片向右移动100px，向下也移动100。 img{ margin:100px 0 0 100px; transform:translate(100px,100px); } 2.rotate()方法：这个方法里有一个参数，表示要旋转的度数，正数表示顺时针旋转，那么负数就表示逆时针旋转了。在要旋转的度数后面添加deg （即degree，度数的意思）。以下代码表示将图片顺时针旋转50°。 img{ margin:100px 0 0 100px; transform:rotate(50deg); ｝ 3.scale()方法：这个方法里有两个参数，没有单位。分别表示宽度和高度放大或缩小的倍数，如果大于1表示放大；如果小于一表示缩小。以下代码表示将图片的宽度和高度都放大两倍。 img{ margin:100px 0 0 100px; transform:scale(2,2); } 4.skew（）方法：有两个参数，分别表示沿着X轴和Y轴倾斜转换，单位同样是deg，表示角度。这个方法不是很容易理解。首先给出下列代码： img{ margin:100px 0 0 100px; transform:skew(20deg,0deg); ｝ 表示将图片沿着x轴逆时针旋转20度。
这是没有使用skew（）方法的样子
这是使用了skew（）方法之后的样子。 为什么呢？这是因为其x轴和Y轴的方向是这样的：
当x轴旋转20°时会将图片进行逆时针旋转，但是请注意：这里不是真正意义上的旋转，而有拉伸倾斜的意思，旋转之后，它的宽度并没有改变，并且做一条垂线可以发现高也是没有改变的。 对于Y轴方向的旋转是一样的： img{ margin:100px 0 0 100px; transform:skew(0deg,20deg); ｝ 上面的代码表示将图片沿着Y轴方向旋转了20°。 旋转之后，就是下面这样了：它是沿着顺时针方向旋转的。
如果，我们对x和y轴都旋转呢？ img{ margin:100px 0 0 100px; transform:skew(20deg,20deg); ｝ 那么最终就是综合作用的效果了，如下图所示：
说了这么多，大家有没有发现我们每次偏移，旋转，倾斜，放大和缩小是相对于哪个点呢？ 如果你稍微细心的话，就会发现是相对于中心点。这里就要用到tansform-origin属性了。 即通过这个属性，我们可以规定这些方法通过哪一个点作为原点。 首先举几个例子。 transform-origin：0 0；表示以左上角为原点。 transform-origin：100% 0；表示以右上角为原点 transform-origin：0 100%；表示以左下角为原点 transform-origin：100% 100%；表示以右下角为原点 于是我们可以得知，这些值的设定是以左上角为基点的，向右为x轴的正方向，向下为y轴的正方向。如果不设定这个属性，那么默认值为 transform-origin:50% 50%;即以中心作为变换的基点。 最后我还要说一下浏览器兼容的问题，为了使代码能在各个浏览器运行成功，我们需要在层叠样式表中多加几行代码，比如说rotate()方法： transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ 这样，我们就可以在各个主要浏览器流畅运行了！ （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
