html2D转换案例,css3学习之2D转换功能详解

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 */

这样，我们就可以在各个主要浏览器流畅运行了！

总结

以上就是这篇文章的全部内容了，希望本文的内容对各位学习或者使用CSS3能带来一定的帮助，如果有疑问大家可以留言交流。