css3 transform(2D)的使用

偏执的太偏执、 2023-07-03 08:29 103阅读 0赞

transform的使用  
transform 属性允许你修改CSS视觉格式模型的坐标空间  
**transform 属性 , 只对 block 级元素生效！**

transfrom的基本属性有：  
①translate：平移  
②rotate:旋转  
③skew:倾斜  
④transform-origin：基点的变换  
⑤scale:缩放  
⑥matrix:矩阵。旋转；平移；缩放；

(1) translate的用法  
X方向平移:transform: translateX(tx)  
Y方向平移:transform: translateY(ty)  
二维平移：transform: translate(tx, ty)； 如果ty没有指定，它的值默认为0。  
可设单值，也可设双值。  
正数表示XY轴正向位移，负数为反向位移。设单值表示只X轴位移，Y轴坐标不变，  
例如transform: translate(100px);等价于transform: translate(100px,0);  
代码如下所示：

body:hover #test{
    				transform: translateX(300px);
    			}

(2) rotate的用法  
transform:rotate(angle);  
正值:顺时针旋转 rotate(360deg)  
负值:逆时针旋转 rotate(-360deg)  
只能设单值。正数表示顺时针旋转，负数表示逆时针旋转  
代码如下所示：

body:hover #test{ 
    				transform: rotate(45deg);
    			}

(3) skew的用法  
transform:skewX(45deg);  
X方向倾斜:transform: skewX(angle)  
skewX(45deg):参数值以deg为单位 代表与y轴之间的角度  
Y方向倾斜:transform: skewY(angle)  
skewY(45deg):参数值以deg为单位 代表与x轴之间的角度  
二维倾斜:transform: skew(ax\[, ay\]); 如果ay未提供，在Y轴上没有倾斜  
skew(45deg,15deg):参数值以deg为单位 第一个参数代表与y轴之间的角度  
第二个参数代表与x轴之间的角度  
单值时表示只X轴扭曲，Y轴不变，如transform: skew(30deg);等价于 transform: skew(30deg, 0)

考虑到可读性，不推荐用单值，应该用transform: skewX(30deg);。skewY表示 只Y轴扭曲，X轴不变

正值:拉正斜杠方向的两个角  
负值:拉反斜杠方向的两个角

代码如下：

body:hover #box{
    				transform: skewY(-30deg);
    			}

(4) transform-origin  
transform-origin CSS属性让你更改一个元素变形的基点。  
transform-origin的写法如下：  
transform-origin: 100px 100px;  
transform-origin: top left;  
…  
如下案例：  
设置基点前的如下图所示  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]  
设置基点后的位置：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]  
代码如下：

#test{
    				width: 300px;
    				height: 100px;
    				background: pink;
    				transition: 2s;
    				transform-origin: top left;
    			}

(5) 缩放scale  
transform:scale(2);  
X方向缩放:transform: scaleX(sx);  
Y方向缩放:transform: scaleY(sy);  
二维缩放 :transform: scale(sx\[, sy\]); (如果sy 未指定，默认认为和sx的值相同)

要缩小请设0.01～0.99之间的值，要放大请设超过1的值。  
例如缩小一倍可以transform: scale(.5);  
放大一倍可以transform: scale(2);  
如果只想X轴缩放，可以用scaleX(.5)相当于scale(.5, 1)。  
同理只想Y轴缩放，可以用scaleY(.5)相当于scale(1, .5)  
正值:缩放的程度  
负值:不推荐使用（有旋转效果）  
单值时表示只X轴,Y轴上缩放粒度一样，如transform: scale(2);等价于transform: scale(2,2);

案例如下： 将正方形缩小到一半

(6) Matrix矩阵  
在 2D变换 中，矩阵变换函数 matrix() 接受 6个值，语法形式如下：  
transform: matrix(a, b, c, d, e, f);  
这相当于，对元素应用一个如下的变换矩阵：  
点(Xi,Yi,1)进行变换后的新坐标  
即根据变换矩阵进行变换之后点 (xi,yi) 的坐标是(axi+cyi+e,bxi+dyi+f)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]  
(7) 矩阵-旋转  
对某一元素应用旋转变换 rotate(θ)，相当于对其应用如下变换矩阵：  
即等价于矩阵变换函数 matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 3]  
(8) 矩阵-平移  
对某一元素应用旋转变换 translate(X, Y)，相当于对其应用如下变换矩阵：  
即等价于使用矩阵变换函数 matrix(1, 0, 0, 1, X, Y)。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 4]  
(9) 矩阵-缩放  
对某一元素应用缩放变换 scale(scaleX, scaleY)，相当于对其应用如下变换矩阵：  
即等价于使用矩阵变换函数 matrix(scaleX, 0, 0, scaleY, 0, 0)  
![在这里插入图片描述][20200205132110680.png]  
(10) 矩阵-倾斜  
对某一元素应用倾斜变换 skew(α, β)，相当于对其应用如下变换矩阵：  
即等价于使用矩阵变换函数 matrix(1, tanβ, tanα,1, 0, 0)。

![在这里插入图片描述][20200205132113355.png]  
案列：使用变换组合，顺序不同导致呈现的结果不同

使用组合之前如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 5]

使用变换组合之后呈现如下图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 6]

1号距离左边的距离：宽度为125px  
![在这里插入图片描述][20200205132213880.png]  
2号距离左边的距离:75px  
![在这里插入图片描述][20200205132249307.png]

造成如上图的问题原因：  
使用变换组合时,最终要转换成矩阵的形式，浏览器的计算方向是从右往左进行继续的

按照 1号 列举一个点 的换算如下  
已基点为坐标，图中点的坐标为（50，50）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 8]  
2号的换算结果为  
![在这里插入图片描述][20200205132333854.png]

代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    		
    			html{
    				height: 100%;
    				overflow: hidden;
    			}
    			body{
    				width: 60%;
    				height: 60%;
    				border: 1px solid;
    				margin: 100px auto 0;
    				overflow: hidden;
    			}
    		
    			#test1{
    				width: 100px;
    				height: 100px;
    				line-height: 100px;
    				background: pink;
    				text-align: center;
    				transition:2s;
    			}
    			#test2{
    				margin-top: 50px;
    				width: 100px;
    				height: 100px;
    				line-height: 100px;
    				background: pink;
    				text-align: center;
    				transition:2s;
    			}
    			
    			/*变换组合时,计算方向是从右往左进行继续的*/
    			
    			/*2号换算
    				1 0 100  50   			150
    				0 1  0   50    			50
    				0 0  1    1     		1
    				
    				.5 0  0   150  			75
    				0  .5 0   50            25
    				0  0  1   1 			1
    			*/	
    			
    			/*
    			从右往左
    				.5 0  0   50  			25
    				0  .5 0   50            25
    				0  0  1   1 			1
    				
    				1 0 100  25   			125
    				0 1  0   25    			25
    				0 0  1    1     		1
    			*/	
    			
    			
    			
    			/*(50,50)---->(125,25)*/
    			body:hover #test1{
    				transform: translateX(100px) scale(.5);
    			}
    			body:hover #test2{
    				transform: scale(.5) translateX(100px);
    			}
    			
    		</style>
    	</head>
    	<body>
    	1号;transform: translateX(100px) scale(.5);
    	<br>
    	2号;transform: scale(.5) translateX(100px);
    		<div id="test1">
    			1号
    		</div>
    		<div id="test2">
    			2号
    		</div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200205131949308.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200205132003931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200205132034957.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200205132046448.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200205132057972.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[20200205132110680.png]: https://img-blog.csdnimg.cn/20200205132110680.png
[20200205132113355.png]: https://img-blog.csdnimg.cn/20200205132113355.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200205132134267.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200205132201102.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[20200205132213880.png]: https://img-blog.csdnimg.cn/20200205132213880.png
[20200205132249307.png]: https://img-blog.csdnimg.cn/20200205132249307.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200205132308188.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200205132324848.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDk5NDczMQ==,size_16,color_FFFFFF,t_70
[20200205132333854.png]: https://img-blog.csdnimg.cn/20200205132333854.png