SOURCE

function toggleView(){
	document.querySelector("#j-view").classList.toggle("expand-view");
}

// 切换事件
document.querySelector("#j-toggle").addEventListener("click",toggleView,false)

// 鼠标划过事件
const aPages = document.getElementById("jPageList").getElementsByTagName("div");

// 循环添加鼠标滑进滑出事件
[].slice.call(aPages).forEach((item,index)=>{	item.addEventListener("mouseenter",function(){
		this.classList.add("active");
	},false)
	item.addEventListener("mouseleave",function(){
		this.classList.remove("active");
	},false)
})

<div class="tg-wrap">
	<div id="j-toggle" class="btn toggle">Toggle</div>
</div>
<div class="pe-wrap">
	<div id="j-view" class="pe-perspective">
		<div class="pe-device">
			<div class="pe-object">
				<div class="pe-front"></div>
			</div>
			<div class="pe-pages" id="jPageList">
				<div class="page-1"></div>
				<div class="page-2"></div>
				<div class="page-3"></div>
				<div class="page-4"></div>
				<div class="page-5"></div>
			</div>
		</div>
	</div>
</div>

$dv-width: 310px;
$dv-height: 630px;
$depth: 30px;
$screengap: 70px;
body{
	background: #d2d1d5;
}
// 按钮效果
.tg-wrap {
	width: 100%;
	height: 80px;
}
.btn{
	display: block;
	border: 1px solid white;
	border-radius: 20px;
}
$tg-height: 40px;
.toggle {
	width: 100px;
	height: $tg-height;
	margin: 10px auto;
	color: white;
	cursor: pointer;
	text-align: center;
	line-height: $tg-height;
}

// 手机效果
.pe-wrap {
	width: 100%;
	height: 700px;
	position: relative;
}
.pe-perspective {
	perspective: 1200px;
	perspective-origin: 0% 0%;
	position: relative;
	width: $dv-width;
	height: $dv-height;
	margin: 0 auto;
}
.pe-device {
	width: 100%;
	height: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: transform 0.5s ease-in-out;
	transform: rotateX(10deg) rotateY(17deg);
}
// 手机
.pe-object{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
	.pe-front{
		width: 100%;
		height: 100%;
		background: url("http://o93mwnwp7.bkt.clouddn.com/demo/phone/iphone_white.png") no-repeat top left;
		background-size: 100% 100%;
	}
	
}
// 展示页面
.pe-pages {
	position: absolute;
	left: $dv-width*0.059;
	top: 74px;
	width: $dv-width*0.88;
	height: $dv-height*0.7657;
	div{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}
}
@for $i from 1 through 5 {
		.pe-pages .page-#{$i} {
			background: url("http://o93mwnwp7.bkt.clouddn.com/demo/phone/screen1_#{$i}.png") no-repeat center center;
			background-size: 100% 100%;
			transition: transform 0.7s ease-in-out (6-$i) * 0.05s+0.1s,opacity 0.4s;
		}
}

.expand-view{
	.pe-device{
		transform: rotateY(50deg) rotateX(20deg) translateZ(-$depth/2) translateZ(-$dv-height/2 + $depth);
	}
	// 鼠标滑过每个图片，会使用js为每个div添加.active属性
	.pe-pages:hover :not(.active){
		opacity: 0.1;
	}
}
@for $i from 1 through 5 {
	.expand-view .page-#{$i} {
		transform: translateZ($depth/2 + $screengap * $i);
	}
}