css3 transform(2D)的使用

最新推荐文章于 2024-04-13 19:38:19 发布

土垚金鑫

最新推荐文章于 2024-04-13 19:38:19 发布

阅读量217

点赞数 1

分类专栏： css3 css 文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_44994731/article/details/104181411

版权

css 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

css3

13 篇文章 1 订阅

订阅专栏

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;
…
如下案例：
设置基点前的如下图所示
在这里插入图片描述
设置基点后的位置：

代码如下：

#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)
在这里插入图片描述
(7) 矩阵-旋转
对某一元素应用旋转变换 rotate(θ)，相当于对其应用如下变换矩阵：
即等价于矩阵变换函数 matrix(cosθ, sinθ, -sinθ, cosθ, 0, 0)。

(8) 矩阵-平移
对某一元素应用旋转变换 translate(X, Y)，相当于对其应用如下变换矩阵：
即等价于使用矩阵变换函数 matrix(1, 0, 0, 1, X, Y)。
在这里插入图片描述
(9) 矩阵-缩放
对某一元素应用缩放变换 scale(scaleX, scaleY)，相当于对其应用如下变换矩阵：
即等价于使用矩阵变换函数 matrix(scaleX, 0, 0, scaleY, 0, 0)

(10) 矩阵-倾斜
对某一元素应用倾斜变换 skew(α, β)，相当于对其应用如下变换矩阵：
即等价于使用矩阵变换函数 matrix(1, tanβ, tanα,1, 0, 0)。

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

使用组合之前如图所示：
在这里插入图片描述

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

1号距离左边的距离：宽度为125px
在这里插入图片描述
2号距离左边的距离:75px

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

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

在这里插入图片描述

2号的换算结果为

代码如下：

<!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>