css3的2d转换,css2d3d转换方法

　　CSS中的2D变换允许我们在二维空间中进行一些基本的变换操作，如移动、旋转、缩放或扭曲等。变换后的元素类似于绝对定位的元素，不会影响周围的元素，但是可以与周围的元素重叠。不同之处在于，转换后的元素仍然占据页面中转换前的空间。

　　借助CSS中的transform属性和以下转换函数，可以实现2D转换：

　　Matrix():以包含六个值(a，b，c，d，e，f)的变换矩阵的形式指定一个2D变换，相当于直接应用一个[a，b，c，d，e，f]的变换矩阵；Translate():沿X轴和Y轴平移对象。这个函数需要提供1~2个参数，第一个参数对应X轴，第二个参数对应Y轴。如果没有提供第二个参数，默认值为0；Translatex():沿X轴(水平方向)平移对象；Translatey():沿Y轴(垂直方向)平移对象；Rotate():旋转指定的对象，旋转的角度可以在函数的参数中指定；Scale():缩放对象。这个函数需要提供1~2个参数，第一个参数对应X轴，第二个参数对应Y轴。如果没有提供第二个参数，则默认采用第一个参数的值；Scalex():缩放对象(改变元素的宽度)；Scaley():缩放对象(改变元素的高度)；Skew():沿X轴和Y轴倾斜和扭曲对象。这个函数需要提供1~2个参数，第一个参数对应X轴，第二个参数对应Y轴。如果没有提供第二个参数，默认值为0；Wx():沿X轴(水平方向)扭曲对象；WY():沿Y轴(垂直方向)扭曲对象。

1. translate()

　　 translate()函数用于根据指定的参数在水平(x轴)或垂直(y轴)方向移动元素。该函数的语法格式如下：

　　翻译(tx，ty)

　　其中tx对应于元素在水平(x轴)方向上的移动距离，ty对应于元素在垂直(y轴)方向上的移动距离。参数ty可以忽略(默认值为0)，两个参数都可以是负数。

　　[示例]使用translate()函数移动指定的元素：

　　！DOCTYPE htmlhtmlhead样式div { width:100 px；高度：100px背景色：# CCCtransform: translate(100px，10px)；}/style/headbody div/div/body/html运行结果如下图所示：

　　图：translate()函数的演示

　　如果只是水平或垂直移动元素，也可以使用translateX()(水平移动元素)或translateY()(垂直移动元素)。translateX()和translateY()函数都只需要提供一个参数，例如：

　　translate x(100px)；/*相当于translate(100px，0px)；*/translate y(10px)；/*相当于translate(0px，10px)；*/

2. rotate()

　　 rotate()函数用于根据给定的角度旋转元素。该函数的语法格式如下：

　　旋转(a)

　　参数a表示元素旋转的角度，如果a为正，表示顺时针旋转，如果a为负，表示逆时针旋转。

　　[示例]使用rotate()函数旋转元素：

　　！DOCTYPE htmlhtmlhead样式div { width:100 px；高度：100px背景色：# CCC边距：20px 0px 0px 20px变换：旋转(45度)；}/style/headbody div/div/body/html运行结果如下图所示：

　　图：rotate()函数的演示

3. scale()

　　 scale()函数用于缩放(放大或缩小)指定元素。该函数的语法格式如下：

　　标度(sx，sy)

　　其中sx表示水平方向的缩放比例，sy表示垂直方向的缩放比例。另外，参数sy可以省略，其默认值等于sx。

　　[示例]使用scale()函数缩放指定的元素：

　　！DOCTYPE htmlhtmlhead样式div { width:100 px；高度：100px背景色：# CCC变换：缩放(0.7)；}/style/headbody div/div/body/html运行结果如下图所示：

　　图：scale()函数的演示

　　提示：当scale()中给定的参数值在-1~1的范围之外时，元素会被放大；当参数值在-1~1的范围内时，元素会减少。

　　与translate()函数类似，如果只在水平方向或垂直方向缩放元素的大小，也可以使用scaleX()(在水平方向缩放元素)和scaleY()(在垂直方向缩放元素)函数。ScaleX()和scaleY()函数只需要提供一个参数，例如：

　　scaleX(0.5)；/*等于小数位数(0.5，1)；*/scaleY(0.5)；/*相当于音阶(1，0.5)；*/

4. skew()

　　 skew()函数用于沿水平方向(X轴)和垂直方向(Y轴)倾斜元素。该函数的语法格式如下：

　　偏斜(轴，y)

　　其中，参数ax表示单元在水平方向的扭转角度，参数ay表示单元在垂直方向的扭转角度。另外，参数ay可以省略。如果省略参数ay，其默认值为0。

　　[示例]使用skew()函数扭曲指定的元素：

　　！DOCTYPE htmlhtmlhead样式div { width:100 px；高度：100px背景色：# CCC边距：20px 0px 0px 10px变换：倾斜(-15度，20度)；}/style/headbody div/div/body/html运行结果如下图所示：

　　图：skew()函数演示

　　此外，如果元素仅水平或垂直变形，也可以使用skewX()(水平缩放元素)和skewY()(垂直缩放元素)函数来实现。Wx()和skewX()函数只需要提供一个参数，例如：

　　skewX(15度)；/*相当于歪斜(15度，0度)；*/偏斜度(15度)；/*相当于歪斜(0度，15度)；*/

5. matrix()

　　 matrix()函数可以看作是sketch()、scale()、rotate()和translate()等几个函数的简称。通过matrix()函数，可以同时定义所有的2D转换操作。该函数的语法格式如下：

　　矩阵(a、b、c、d、tx、ty)

　　matrix()函数中的六个参数对应几个函数，分别是scaleX()、skewY()、skewX()、scaleY()、translateX()和translateY()。你可以用matrix()来实现各种2D转换操作，比如：

　　translate(tx，ty)=matrix(1，0，0，1，tx，ty)；其中tx和ty是水平和垂直平移值；rotate(a)=matrix(cos(a)，sin(a)，-sin(a)，cos(a)，0，0)；其中a是度数。可以交换sin(a)和-sin(a)值反向旋转；scale(sx，sy)=matrix(sx，0，0，sy，0，0)；其中sx和sy是水平和垂直缩放值；skew(ax，ay)=matrix(1，tan(ay)，tan(ay)，1，0，0)；其中ax和ay是以度为单位的水平和垂直值。[示例]使用matrix()函数对元素执行2D转换运算：

　　！DOCTYPE htmlhtmlhead样式div { width:100 px；高度：100px背景色：# CCC边距：20px 0px 0px 10px浮动：左；} .一个{ transform: matrix(0.866，0.5，-0.5，0.866，0，0)；} .两个{左边距：35px变换：矩阵(0.586，0.8，-0.8，0.686，0，0)；} .三{左边距：40px边距-顶部：25px变换：矩阵(0.586，0.8，-0.8，0.866，0，0)；} .four { transform: matrix(0.586，0.8，-0.8，0.586，40，30)；}/style/head body div class= one /div div class= two /div div class= three /div div class= four /div/body/html运行结果如下图所示：

　　图：matrix()函数演示

　　以上就是这篇关于CSS实现五种常用2D转换的文章。更多相关的CSS 2D转换，请搜索以前的文章或继续浏览下面的相关文章。希望你以后能支持我！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。