css剪切平面图片拼接成3D图片,以及控制视角进入图片内部达成VR效果

剪切图片:
	例如:将平面图片变成正方体,则正方体前后左右四个面各自为图片的一部分
	假设图片大小为:400*400;
	(1)设置3D环境
		transform-style: preserve-3d;
		perspective(900px);				作用于元素的后代,而不是其元素本身
		或transform:perspective(900px); 只对自身,每个子元素的透视点都相同
	
	(2)获取每份剪切大小:图片宽度/份数
		四个div宽度为100,分别作为图片的一部分
		
	(3)进行剪切,每个div移动背景图位置,获取各自图片的内容
		background-position位移图片
	
	(4)进行拼接
		方式一:通过改变形变点再旋转,只用计算形变点距离和角度,不用计算z轴的偏移量
			先transform-origin: center center -200px; 	移动形变点z轴的位置
			通过rotateY(ndeg)
		
		方式二:需要计算z轴的偏移量
			先rotateY(ndeg),然后translateZ,旋转过后,xyz轴参照平面变成了旋转后的平面,而非屏幕
			
			计算z轴偏移量,先进行各边旋转,旋转过后,按照xyz轴的方向,应该根据z轴的方向进行偏移指定距离到指定角度的方向,形成多边形
		
	(5)进入立体图形内部的VR效果:
		在每个背景div的父元素,即设置3D环境的元素,通过translateZ或perspective来拉近远视角,进入立体图形

拼接成八边形位移示意图:
假设每边400,则旋转后需要根据z轴平移200+200*根号2 的距离

旋转过后,xyz轴参照平面变成了旋转后的平面,而非屏幕示意图:
位移图形中点位置相同

 .g-container {
    
    
     width: 200px;
     height: 200px;
     background-color: red;
     transform: rotateY(85deg) translateZ(200px);	//旋转90deg过后,绕Z轴位移,此时z轴在原屏幕的x轴方向
 }
 
 .g-container2{
    
    
     width: 200px;
     height: 200px;
     background-color: yellowgreen;
     transform: translateX(200px);			//未旋转,绕x轴平移
 }

进入3D图形内部:
未进入前:

进入后:即在父元素通过translateZ拉近视角

类似效果图:

$imgCount : 4;

.container{
    
    
	position:relative;
}

.stage{
    
    
	position:relative;
	width:800px;
	height:400px;
	margin:0 auto;
	perspective:500px;
	transform-style: preserve-3d;
	
	.control{
    
    
		position:relative;
		width:100%;
		height:100%;
		transform-style: preserve-3d;
		animation:rotate 40s linear infinite;	//父元素设置视角距离
		
		.imgWrap{
    
    
			position:absolute;
			width:400px;
			height:400px;
			top:50%;
			left:50%;
			transform:translate(-50%, -50%);
			transform-style: preserve-3d;
			
			.img{
    
    
				position:absolute;
				width:400px;
				height:400px;
				line-height:400px;
				text-align:center;
				font-size:120px;
				top:0;
				left:0;
				transform-style: preserve-3d;
			}
			@for $i from 1 through $imgCount{
    
    	//计算多边形每个部分旋转角度和偏移量
				.img#{
    
    $i}{
    
    
					
					background:hsla($i * 30, 50%, $i * 20%, $i * 0.2);
					transform: rotateY(35 + ($i * 90deg)) translateZ(200px) ;
				}
			}
		}
	}
}

@keyframes rotate{
    
    
	0%{
    
    
		transform: translateZ(-230px) rotateY(0deg) ;
	}
	50%{
    
    
		transform: translateZ(-270px) rotateY(-360deg) ;
	}
	100%{
    
    
		transform: translateZ(-250px) rotateY(-720deg);
	}
}

//拉近视角距离,进入内部
@keyframes rotate{
    
    
	0%{
    
    
		transform: translateZ(-230px) rotateY(0deg) ;
	}
	50%{
    
    
		transform: translateZ(-270px) rotateY(-360deg) ;
	}
	100%{
    
    
		transform: translateZ(-250px) rotateY(-720deg);
	}
}

<div class="container">
	<!-- 舞台层 -->
	<div class="stage">
		<!-- 控制层 -->
		<div class="control">
			<!-- 图片层 -->
			<div class="imgWrap">
				<div class="img img1">3</div>
				<div class="img img2">D</div>
				<div class="img img3">视</div>
				<div class="img img4">图</div>
			</div>
		</div>
	</div>
</div>