前端——3D立体方翻滚我正在参加[码上掘金挑战赛]详情请看：码上掘金挑战赛来了perspective:视线与 z=0 平

我正在参加[码上掘金挑战赛]详情请看：码上掘金挑战赛来了

3D立体方翻滚代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		body {
			perspective: 800px;
		}
		
		.box {
			width: 300px;
			height: 300px;
			border: 1px solid red;
			position: relative;
			margin: auto;
			margin-top: 250px;
			transform-style: preserve-3d;
			transform: rotateX(60deg) rotateY(80deg) rotateZ(60deg)
		}
		.box>img {
			width: 300px;
			height: 300px;
			position: absolute;
		}
		.box>img:first-child {
			
		}
		.box>img:last-child {
			transform: translateZ(300px);
		}
		.box>img:nth-child(2) {
			/* transform: translateY(-300px); */
			bottom: 300px;
			transform-origin: bottom;
			transform: rotateX(-60deg);
		}
		.box>img:nth-child(3) {
			/* transform: translateY(300px); */
			bottom: -300px;
			transform-origin: top;
			transform: rotateX(60deg);
		}
		.box>img:nth-child(4) {
			/* transform: translateX(300px); */
			left: -300px;
			transform-origin: right;
			transform: rotateY(60deg);
		}
		.box>img:nth-child(5) {
			/* transform: translateX(-300px); */
			left: 300px;
			transform-origin: left;
			transform: rotateY(-60deg);
		}
		
	</style>
</head>
<body>
	<div class="box">
		<img src="imgs/cat.jpg" alt="">
		<img src="imgs/dog.jpg" alt="">
		<img src="imgs/zimu.jpg" alt="">
		<img src="imgs/cat.jpg" alt="">
		<img src="imgs/dog.jpg" alt="">
		<img src="imgs/cat.jpg" alt="">
	</div>
</body>
</html>

代码结论

perspective:视线与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。z>0 的三维元素比正常大，而 z<0 时则比正常小。
position:属性用于指定文档中的定位方式。
static:使用正常的布局行为，在文档常规流中当前的布局位置。
relative:先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置,相对定位。
absolute：会被移出正常文档流，并不预留空间，通过指定元素相对于最近的非静态定位祖先元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。
fixed：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
transform-style：是位于 3D 空间中还是平面中。transform-style: flat;(不是3D)transform-style: preserve-3d;（3D）
transform 属性允许你旋转，缩放，倾斜或平移给定元素。