CSS3起步 09-------3D基础之景深，transform-style及backface-visibility

最新推荐文章于 2022-04-14 22:40:37 发布

燃情雪

最新推荐文章于 2022-04-14 22:40:37 发布

阅读量985

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/h1234561234561/article/details/89280512

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

问题一，什么事3D视角？
01，首先我们得知道3D坐标轴，如图:
在这里插入图片描述
X轴从左到右，Y轴从上到下，Z轴从里到外。视角处于Z轴正方向圆锥尖点前方，正值方向为顺时针。
注意点：原始的X，Y，Z轴的中心点为元素的中心点【也叫做元素的基点（可以利用transform-origin自行更改）】

02，我们得知道Z轴的具体距离，我们怎末观察。其实想想为什么每次设计3D场景都需要一个属性perspective【景深】，这就是为Z轴原始定位，提供了一个空间距离的参照，或正或负

问题二，那景深具体是什莫呢，怎末作用，视觉效果又是神魔？
景深：让3D场景有近大远小的感觉（我们肉眼距离屏幕的距离）
注意点：
01，元素在Z轴上的移动就是改变我们肉眼距离屏幕的距离，从而产生一种视觉效果，其元素离我们远了或近了。
02，perspective【景深】虽然是一个不可继承的属性，但是可以作用与后代元素【不是子代元素】。
03，transform:perspective只可以作用于本身元素，且必须放在transform变化样式首位

问题三，有了景深后，怎末进行3D旋转，平移，缩放呢？
旋转
01，单值旋转如rotateX(xdeg)：以X轴为旋转轴，角度为x度，顺时针方向为正，逆时针反之。
02，组合旋转：rotate3d(x, y, z, angle);沿着元素中心到点（x, y, z）所构成的射线进行角度为angle数值度旋转。
平移
01，单值平移如translateX(100%)：以X轴为平移轴，平移距离为元素本身的width，右方向为正，逆时针反之。
02，组合平移：translate3d(100px, 100px, 100px);以元素中心到点（100, 100, 100）所构成的射线进行平移到点（100, 100, 100）的位置。
注意点：X，Y轴距离可以设置百分比，参照物为其元素本身的width，height；然而Z轴是没有百分比一说的，因为其元素本身没有厚度一说。
缩放
没有太大意义，和2D缩放效果近乎一样，因为元素本身就没有厚度，所以在Z轴上也缩放不了

问题四，什么是灭点？
定义：灭点指的是立体图形各条边的延伸线所产生的相交点
反正我也看不懂，直接上图，这个只可意会，不可言传。
在这里插入图片描述
注意点：景深越大，灭点越远，元素变形更小；景深越小，灭点越近，元素变形更大。

问题五，有了Z轴上的视觉距离效果，那怎末定义Z轴上的视觉层级效果呢？
transform-style 营造一种视觉层级舞台效果。
注意点
01， transform-style是一个不可继承的属性，但是可以作用于子代【注意不是后代】子元素
02，舞台上的各个元素，除了遵守DOM层次级别外，实际上在Z轴的原始位置都是相同的【没有厚度】，且是紧贴舞台的【简单来说，如果舞台存在一个背景色幕布，则舞台中元素，稍微在X，Y轴上旋转角度，则就会有一部分会旋转到到幕布后面，从而被幕布遮挡。】

补充：backface-visibility一页分两面,背面和正面【背面隐藏】

demo:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>立方体第一版</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			html,body {
				height: 100%;
				overflow: hidden;
			}
			#wrap {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 400px;
				height: 400px;
				font: 50px/200px "宋体";
				box-sizing: border-box;
				border: 1px solid black;
				perspective: 200px;
				background: url(img/mm.jpg) no-repeat;
				background-size: 100% 100%;
				/* transform-style: preserve-3d; */
				transform: translate(-50%, -50%);
			}
			#box {
				position: absolute;
				left: 150px;
				top: 150px;
				width: 100px;
				height: 100px;
				text-align: center;
				font: 25px/100px "宋体";
				transition: all 2s;
				transform-style: preserve-3d;
				transform-origin: center center -50px;
				background-color: rgba(123, 123, 223, .2);
			}
		    #box div {
				position: absolute;
				width: 100px;
				height: 100px;
				text-align: center;
				font: 25px/100px "宋体";
				/* 一页分两面,背面和正面 */
				backface-visibility: hidden;
				background-color: rgba(123, 123, 223, .4);
			}
			#box div:nth-child(5) {
				top: -100px;
				transform-origin: bottom;
				transform: rotateX(90deg);
			}
			#box div:nth-child(6) {
				bottom: -100px;
				transform-origin: top;
				transform: rotateX(-90deg);
			}
			#box div:nth-child(3) {
				left: -100px;
				transform-origin: right;
				transform: rotateY(-90deg);
			}
			#box div:nth-child(4) {
				right: -100px;
				transform-origin: left;
				transform: rotateY(90deg);
			}
			#box div:nth-child(2) {
				transform: translateZ(-100px) rotateX(180deg);
			}
			#wrap:hover #box {
				transform: rotateX(360deg);
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="box">
				<div>前</div>
				<div>后</div>
				<div>左</div>
				<div>右</div>
				<div>上</div>
				<div>下</div>
			</div>
		</div>
	</body>
</html>