这个专题页我挺喜欢的，就在上课的时候简单的仿制了一下，不过没有设置video和图片的切换，直接用了图片，算是阉割版了。下面的3D旋转使用了不同的方式，把图片也包括进去了，原始版本是只有边框旋转，图片不动。

其实这种3D没有添加景深，都算是伪3D吧，不过比起普通的旋转来说看起来效果可能更酷炫一些，不过网页上用多了也有点喧宾夺主，还是要适可而止。

具体效果如下：

效果展示

案例下载：

链接：https://pan.baidu.com/s/1kW9H0Q7 密码：21sc

案例知识点：

1、这里的布局使用了一种百分比的布局方式

2、animation的各种属性，比如延迟。

3、rotateY，沿着Y轴的3D旋转。

部分代码如下：

.nav{
	position:relative;
	width:900px;
	margin:0 auto;
	top:70%;}
.box{
	width:25%;
	float:left;
	animation:moveUp 0.8s ease-out forwards;
	transform:translateY(300px);
	}
.box a{
	display:block;}
.border{
	width:60%;
	margin:0 auto;
	text-align:center;
	border:3px solid #c32a52;
	border-top:none;
	padding-bottom:10%;
	position:relative;
	}
.border img{
	width:45%;}
.border::before,.border::after{
	content:"";
	position:absolute;
	width:20.43%;
	height:3px;
	left:0;
	top:0;
	background:#c32a52;
	}
.border:after{
	right:0;
	left:auto;}
.box2 .border::after,.box2 .border::before{
	background:#f7eb4e;}
.box3 .border::after,.box3 .border::before{
	background:#3d8acc;}
.box4 .border::after,.box4 .border::before{
	background:#d75e2d;}
.b2{
	border-color:#f7eb4e}
.b3{
	border-color:#3d8acc}
.b4{
	border-color:#d75e2d}
.box2{
	animation-delay:0.2s;}	
.box3{
	animation-delay:0.4s;}
.box4{
	animation-delay:0.6s;}
.rotateY{
	transition:all 1s ease-out;
	transform:rotateY(360deg);}
@keyframes moveUp{
	0%{
		transform:translateY(300px);}
	100%{
		transform:translateY(0);}
	}

JavaScript代码如下：

<script>
$(function(){
	$(".box").mouseenter(function(){//鼠标移入
		$(this).find(".border").addClass("rotateY");
		})
	$(".box").mouseleave(function(){/*鼠标移出*/
		$(this).find(".border").removeClass("rotateY");
		})
	})
</script>