3D转换与透视效果：CSS和JavaScript实践-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_51607474/article/details/121617602

1.transform- style:

flat 默认值表示2d

preserve-3d 表示3d

3d不能和overflow:hidden使用,如果使用,则效果相当于2d.

2.景深

语法:perspective:npx;

n取值一般为500px-1200px.

程序中实现的方法 perspective 元素距离视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）.

3.3D transform

1.位移

translate3d(x,y,z);

translateZ(z);

2.旋转

rotate3d(x,y,z,a)(x,y,z建议取值0或1)

x ：是一个 0 到１之间的数值，主要用来描述元素围绕 X 轴旋转的矢量值；

y ：是一个０到１之间的数值，主要用来描述元素围绕 Y 轴旋转的矢量值；

z ：是一个０到１之间的数值，主要用来描述元素围绕 Z 轴旋转的矢量值；

a ：是一个角度值，主要用来指定元素在 3D 空间旋转的角度，如果其值为正值，元素顺时针旋转，反之元素逆时针旋转。

旋转举例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.wrap{
			width: 200px;
			height: 300px;
			border: 1px solid #333;
			float: left;
			margin: 10px;
			transform-style: preserve-3d;
			perspective: 800px;
		}
		img{
			transition: 1s;
		}
		.wrap:nth-child(1):hover img{
			/* x正值 向后躺的 */
			transform: rotateX(45deg);
		}
		.wrap:nth-child(2):hover img{
			/* x负值 向前趴的 */
			transform: rotateX(-45deg);
		}
		.wrap:nth-child(3):hover img{
			/*Y正值 按右边*/
			transform: rotateY(45deg);
		}
		.wrap:nth-child(4):hover img{
			/*Y负值 按左边*/
			transform: rotateY(-45deg);
		}
		.wrap:nth-child(5):hover img{
			/*z正值 顺时针*/
			transform: rotateZ(45deg);
		}
		.wrap:nth-child(6):hover img{
			/*z负值 逆时针*/
			transform: rotateZ(-45deg);
		}
		.wrap:nth-child(7):hover img{
			/*
				rotate3d(x,y,z,ndeg)
				x y z取值0,1 
					0不旋转
					1 旋转
				ndeg 旋转的角度
			*/
			transform: rotate3d(1,1,0,45deg);
			/* transform: rotateX(30deg) rotateY(40deg) rotateZ(50deg); */
		}
	</style>
</head>
<body>
	<div class="wrap">
		<img src="./images/pic02.jpg" alt="">
	</div>
	<div class="wrap">
		<img src="./images/pic02.jpg" alt="">
	</div>
	<div class="wrap">
		<img src="./images/pic02.jpg" alt="">
	</div>
	<div class="wrap">
		<img src="./images/pic02.jpg" alt="">
	</div>
	<div class="wrap">
		<img src="./images/pic02.jpg" alt="">
	</div>
	<div class="wrap">
		<img src="./images/pic02.jpg" alt="">
	</div>
	<div class="wrap">
		<img src="./images/pic02.jpg" alt="">
	</div>
	<div class="wrap">
		<img src="./images/pic02.jpg" alt="">
	</div>
	<div class="wrap">
		<img src="./images/pic02.jpg" alt="">
	</div>
</body>
</html>

3.缩放

scaleZ(z)

scale3d(x,y,z)

两者单独使用时没有任何效果,需配合其他的变形函数一起使用,如:rotate等.