html--css之2D/3D形变 transform

最新推荐文章于 2023-05-30 17:31:37 发布

Victor_Wei_H5

最新推荐文章于 2023-05-30 17:31:37 发布

阅读量1.3k

点赞数 1

分类专栏： WEB前端文章标签： html CSS 2D3D rotate translate

本文链接：https://blog.csdn.net/victor_wei_h5/article/details/53248173

版权

WEB前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

css样式中的2D，3D形变transform也是平时工作中常用的属性，这里讲一些常见的技巧和注意事项。

1.translate

在2D形变中，位移translate有两个参数，就是沿着x，y轴位移的距离。在3D形变中，位移translate有三个参数，分别是沿着x，y，z坐标轴位移的距离。这个属性比较简单。

2.rotate

在2D形变中，rotate有一个参数，就是旋转的角度，注意这里的旋转是顺时针的。在3D形变中，rotate有三个参数，分别是沿着x，y，z坐标轴旋转的角度。需要注意的是这里的旋转点都是在元素的中心，可以通过transform-origin属性去调整旋转点。在做3D旋转时，特别需要注意的一点就是，坐标轴会跟着一起旋转。所以当需要同时旋转和位移时，要考虑好先旋转或者是先位移会产生的不容效果；

例如：如下两个初始位置相同的div就是因为旋转和位移顺序的不同，产生了不同的效果

<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			.eye {
				/*景深*/
				perspective: 1200px;
				/*调整*/
				perspective-origin: 300px 300px;
			}
			
			.box {
				transform-style: preserve-3d;
				height: 600px;
				position: relative;
			}
			.box>div{
				position: absolute;
				left: 200px;
				top: 200px;
				height: 200px;
				width: 200px;
				font-size: 40px;
				line-height: 200px;
				text-align: center;
				
			}
			/*先旋转再位移*/
			.transfrom1 {
				background-color: red;
				transform: rotatey(45deg) translatez(200px);
			}
			/*先位移在旋转*/
			.transform2 {
				background-color: blue;
				transform: translatez(200px) rotatey(45deg) ;
			}
		</style>

	</head>

	<body>
		<div class="eye">
			<div class="box">
				<!--先旋转再位移-->
				<div class="transfrom1">
					transform1
				</div>
				<!--先位移在旋转-->
				<div class="transform2">
					transform2
				</div>
			</div>
		</div>

	</body>

</html>

3.scale

在2D形变中，scale有两个参数，就是沿着x，y轴缩放的比例，这个值小于1代表缩小。在3D形变中，sacle有三个参数，分别是沿着x，y，z坐标轴缩放的比例。

4.skew

这个属性是2d形变中的属性，所以只有两个参数，分别表示沿着x轴和y轴的2d倾斜角度；这个属性需要注意是，在倾斜的时候，元素里的文字也会跟着倾斜，如下图：

<!doctype html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			.skew{
				position: absolute;
				left: 200px;
				top: 200px;
				height: 200px;
				width: 200px;
				font-size: 40px;
				line-height: 200px;
				text-align: center;
				background-color: blue;
				transform: skew(45deg) ;
		</style>

	</head>

	<body>
				<div class="skew">
					skew
				</div>

	</body>

</html>