.video{
width: 400px;
height: 300px;
perspective: 800px;
}
.video .shadow{
width: 350px;
height: 250px;
background: #D5D5D5;
margin: 10px auto 0;
border-radius: 20px;
position: relative;
box-shadow: 12px 12px 24px rgba(0,0,0,0.2);
}
.video .shadow:before,
.video .shadow:after{
position: absolute;
content: "";
}
.video .shadow:before{
width: 95%;
height: 95%;
background: #F4F4F4;
transform: rotateX(70deg);
bottom: -76%;
}
.video .shadow:after{
width: 90%;
height: 90%;
background: #E0E0E0;
transform: rotateY(70deg);
right: -56%;
}
.video .player{
height: 100%;
width: 100%;
position: relative;
transform-style: preserve-3d;
}
.video .box{
height: 100%;
width: 100%;
background: linear-gradient(#1e222a, #3e3f45);
position: absolute;
transform-origin: center;
transform: rotateY(0deg);
transition: 0.6s;
}
.video .box:before{
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.3);
z-index: 3;
transition: 0.6s;
}
.video .box:after{
content: "";
position: absolute;
width: 200%;
height: 200%;
background: linear-gradient(45deg, rgba(255,255,255,0.2) 0%, rgba(0,0,0,0.4) 100%);
top: -75%;
left: -50%;
z-index: 1;
}
.video:hover .box{
transform: rotateY(180deg);
}
.video:hover .box:before{
opacity: 0;
}
.video:hover .box:after{
opacity: 0;
}在这段代码中，大家可以看到 CSS3 提供的大部分新特性，包括透视、单独变换、过渡和过滤器等等，都得到了充分的应用。同时，优秀的代码设计甚至还能实现一些让人惊叹的效果，比如在此处实现的鼠标悬浮翻转动画效果。
在设计和开发中，能够有效利用 CSS3 的新特性并保持代码的可读性和容易维护性，是一个设计师和开发者都应该追求的目标。