CSS 中的 2D 转换允许我们在二维空间中执行一些基本的变换操作,例如移动、旋转、缩放或扭曲等,变换后的元素与绝对定位的元素类似,不会影响周围的元素,但可以和周围的元素重叠,不同的是,转换后的元素在页面中任然会占用为转换之前的空间。
下面我们来介绍2D的转换:
一、移动translate()
根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动,可以改变元素在页面中的位置,类似于定位。
1. 语法:
transform:translate(x,y);
或者分开写也是可以的
transform:translateX(n);transform:translateY(n);
2. 重点:
(1)定义2D转换中的移动,沿看X,Y轴元素移动;
(2)translate最大的优点就是不会影响其他元素的位置;
(3)translate自身的百分比是相对于自身元素translate(50%,50%);
(4)对行内标签没有效果;
举例说明:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:translate(100px,10px);}</style></head><body><div></div></body></html>
运行结果:
二、旋转rotate()
rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
语法:transfrom:rotate(旋转的度数)
重点:
rotate(度数),单位是deg例如:rotate(45deg);
角度是正为顺时针,是负为逆时针;
默认顺时针的中心点为元素的中心点;
举例说明:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px20px;transform:rotate(45deg);}</style></head><body><div></div></body></html>
运行结果:
三、2D转换中心点transform-origin:
语法:
transform-origin:xy;
重点:
(1)注意后面x,y用空格隔开;
(2)x y默认的中心点是元素的中心点(50% 50%);
(3)还可以给x y设定像素或者方向名词(right left center bottom top);
四、缩放 scale()
scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:
(1)修改元素的大小,放大或者缩小元素
(2)为负数会颠倒
(3)函数的语法格式如下:
scale(sx,sy)
其中 sx 表示水平方向的缩放比例,sy 表示垂直方向的缩放比例。另外,参数 sy 可以省略,它的默认值等于 sx。
举例说明:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;transform:scale(0.7);}</style></head><body><div></div></body></html>
运行结果:
五、倾斜 skew()
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
(1)skewX(<angle>);表示只在X轴(水平方向)倾斜。
(2)skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
(3)让元素在不同方向上倾斜。
(4)skew(a)等于skew(a,0)
(5)skew(x,y)
(6)单位角度deg
举例说明:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;transform:skew(-15deg,20deg);}</style></head><body><div></div></body></html>
运行结果:
六、matrix()
matrix() 函数可以看作是 skew()、scale()、rotate() 和 translate() 几个函数的缩写形式,通过 matrix() 函数可以同时定义所有 2D转换操作,函数的语法格式如下:
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 为单位的水平和垂直值。
举例说明:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;background-color:#CCC;margin:20px0px0px10px;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><divclass=one></div><divclass=two></div><divclass=three></div><divclass=four></div></body></html>
运行结果:
matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。
用矩阵表达变换量 matrix(a,b,c,d,x,y)
● a c x
●b d y
●0 0 1
下面运用一个具体案例来实践一下:
代码如下:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0><title>Document</title><style>body{margin:100px;}.transformElement{width:200px;height:200px;background-color:red;transition:all1slinear;float:left;position:relative;left:0;color:#FFF;/*transform-origin:lefttop;*/}.transformElement2{width:200px;height:200px;background-color:blue;transition:all1slinear;float:left;}.transformElement:hover{/*transform:translate(200px,0)rotate(360deg)scale(2);*//*left:100px;*//*transform:scale(2,0.5)*/transform:skew(-45deg,45deg);}.clock{width:400px;height:400px;border-radius:50%;background-color:#Faa;position:relative;}.stick{width:4px;height:200px;background-color:blue;position:absolute;left:198px;top:0;transition:all12slinear;transform-origin:centerbottom;}.stickshort{width:8px;height:100px;background-color:rgb(142,21,248);position:absolute;left:196px;top:100px;transition:all12slinear;transform-origin:centerbottom;z-index:2;}.clock:hover.stick{transform:rotate(4320deg);}.clock:hover.stickshort{transform:rotate(360deg);}</style></head><body><!--<div></div><div></div>--><div><div></div><div></div></div></body></html>
运行结果: