CSS——transform实现2D变换

最新推荐文章于 2023-03-13 14:15:06 发布

时光·漫步zth

最新推荐文章于 2023-03-13 14:15:06 发布

阅读量1.2k

点赞数

分类专栏： CSS 前端

本文链接：https://blog.csdn.net/qq_41573234/article/details/80575449

版权

前端同时被 2 个专栏收录

36 篇文章 3 订阅

订阅专栏

CSS

9 篇文章 0 订阅

订阅专栏

1. transform 的基本属性值

值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	通过设置 X 轴的值来定义缩放转换。
scaleY(y)	通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图。

【注】目前主流浏览器并未支持标准的 transform 属性，所以在实际开发中还需要添加各浏览器厂商的前缀。例如，需要为Firefox 浏览器添加-moz- 前缀；为 IE 浏览器添加 -ms- 前缀；为 Opera 浏览器添加 -0- 前缀；为 Chrome 浏览器添加 -webkit-前缀。

2. 应用 transform 属性实现旋转

应用 transform 属性的 rotate（<angle>）函数可以实现 2D 旋转。参数 <angle> 用于指定旋转的角度。其值可取正或负，正值代表顺时针旋转，负值代表逆时针旋转，在使用该函数之前，可以应用 transform-origin 属性定义变换的中心点。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2D变换</title>
<style type="text/css">
.rotate{
	width:100px;
	height:100px;
	border: 2px solid #F00	;
	-moz-transform:rotate(30deg);
	-ms-transform:rotate(30deg);
	-o-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
}
</style>
</head>

<body>
<div class="rotate"> </div>
</body>
</html>

执行结果：

3. 应用 transform 属性实现缩放

scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。

应用 transform 属性的 scale(<number>[,<number>])、 scaleX(<number>)、scaleY(<number>) 函数可以实现缩放。其中，scale(<number> [,<number>] ) 可以实现在 x 轴和 y 轴上同时缩放，而后面的两个函数则用于单独实现在 x 轴或者在 y 轴上缩放。当使用 scale(<number> [,<number>]) 函数时，如果只指定一个参数，那么在 x 轴和 y 轴都缩放此参数所指定的比例。
实现缩放的这 3 个函数的参数值都是自然数数值(可以为正、负、小数)，绝对值大于1，代表放大；绝对值小于1，代表缩小。当值为负数时，对象反转。当参数值为1时，表示不进行缩放。

【例】

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<style>
    	.scale{
			width:100px;
			height:100px;
			border:2px solid #F00;
			-moz-transform:scaleX(2);
			-webkit-transform:scaleX(2);
			-o-transform:scaleX(2);
			-ms-transform:scaleX(2);
		}
		
    </style>
</head>

<body>
	<div class = "scale">
	
	</div>
</body>
</html>

缩放前：缩放后：

4. 应用 transform 属性实现平移

应用 transform 属性的 translate(<length>[,<length>)、 translateX(<length>) 和 translateY(<length>) 函数可以实现 2D 平移。其中，translate(<length>[,<length>]) 可以实现在 x 轴和 y 轴上同时平移，而后面的两个函数则用于单独实现在 x 轴或者在 y 轴上平移。如果将 translate(<length>[,<length>]) 中的第一个参数设置为 0 ，那么可以实现translateY(<length>) 函数的效果；如果将第二个参数设置为 0，那么可以实现 translateX(<length>) 函数的效果。

实现平移的这 3 个函数的参数值都是像素值，可以是正值也可以是负值，x 轴为正值时代表向右移动，x 轴为负值时代表向左移动，y 轴为正值时代表向下移动，y轴为负直时代表向上移动。

【例】

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<style>
    	.scale{
			width:100px;
			height:100px;
			border:2px solid #F00;
			-moz-transform:translate(50px,50px);
			-webkit-transform:translate(50px,50px);
			-o-transform:translate(50px,50px);
			-ms-transform:translate(50px,50px);
		}
		
    </style>
</head>

<body>
	<div class = "scale">
	
	</div>
</body>
</html>

平移前：

平移后：

时光·漫步zth

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
CSS——transform实现2D变换

1. transform 的基本属性值值描述 none 定义不进行转换。 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y) 定义 2D 转换...
复制链接

扫一扫