translate(tx, ty)
其中 tx 对应元素在水平(X轴)方向的移动距离,ty 对应元素在垂直(Y轴)方向的移动距离,参数 ty 可以忽略(默认为 0),两个参数均可以为负值。<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: #CCC; transform: translate(100px, 10px); } </style> </head> <body> <div></div> </body> </html>运行结果如下图所示:
图:translate() 函数演示
translateX(100px); /* 等同于 translate(100px, 0px); */
translateY(10px); /* 等同于 translate(0px, 10px); */
rotate(a)
其中参数 a 表示元素要旋转的角度,若 a 为正值则表示顺时针旋转,若 a 为负值则表示逆时针旋转。<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: #CCC; margin: 20px 0px 0px 20px; transform: rotate(45deg); } </style> </head> <body> <div></div> </body> </html>运行结果如下图所示:
图:rotate() 函数演示
scale(sx, sy)
其中 sx 表示水平方向的缩放比例,sy 表示垂直方向的缩放比例。另外,参数 sy 可以省略,它的默认值等于 sx。<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: #CCC; transform: scale(0.7); } </style> </head> <body> <div></div> </body> </html>运行结果如下图所示:
图:scale() 函数演示
提示:当 scale() 中,给定的参数值在 -1~1 范围之外时,元素将被放大;当在参数值在 -1~1 范围之内时,元素将被缩小。
与 translate() 函数类似,如果是仅在水平方向或者仅在垂直方向上缩放元素大小,也可以使用 scaleX()(在水平方向缩放元素)和 scaleY()(在垂直方向缩放元素)函数。scaleX() 和 scaleY() 函数仅需要提供一个参数即可,例如:
scaleX(0.5); /* 等同于 scale(0.5, 1); */
scaleY(0.5); /* 等同于 scale(1, 0.5); */
skew(ax, ay)
其中,参数 ax 表示元素水平方向的扭曲角度,参数 ay 表示元素垂直方向的扭曲角度。另外,参数 ay 可以省略,若省略参数 ay,则其默认值为 0。<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: #CCC; margin: 20px 0px 0px 10px; transform: skew(-15deg, 20deg); } </style> </head> <body> <div></div> </body> </html>运行结果如下图所示:
图:skew() 函数演示
skewX(15deg); /* 等同于 skew(15deg, 0deg); */
skewY(15deg); /* 等同于 skew(0deg, 15deg); */
matrix(a, b, c, d, tx, ty)
matrix() 函数中的 6 个参数分别对应 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 是以 deg 为单位的水平和垂直值。<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: #CCC; margin: 20px 0px 0px 10px; float: left; } .one { transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0); } .two { margin-left: 35px; transform: matrix(0.586, 0.8, -0.8, 0.686, 0, 0); } .three { margin-left: 40px; margin-top: 25px; transform: matrix(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() 函数演示
本文链接:http://task.lmcjl.com/news/14684.html