html5+jQuery 3D视频播放效果

    html5+jQuery 3D视频播放效果。本特效特殊之处在于视频犹如嵌在两张卡片上，并且是放在桌面上，鼠标移到桌面上，镜头会垂直于桌面。点击卡片，就会播放视频。鼠标移开桌面，卡片又会斜放置于桌面，视频会一直播放，就像电视机放倒一样。不得不说，创意不错，html5真的很强大。 1、在head引入下面的代码：

<style>
* { -moz-boz-sizing: border-box; font-family: Avenir, sans-serif; }
body { margin: 0; }
figure#desk {
  transform: rotateX(60deg);
  position: relative;
  width: 200%;
  height: 900px;
  background: url(woodgrain.jpg);
  background-size: cover;
  margin-left: -200px;
  margin-top: -150px;
  transition: 1.2s 2s;
}
div#scatter {
  perspective: 700px;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background: linear-gradient(#6c6769  0%, #0a0a0a 100%);
}
figure#desk a  {
  position: absolute;
  top: 150px;
  border: 20px solid #ffe;
  box-shadow: 0px 0px 6px 6px rgba(0,0,0,0.3);
  width: 20%;
  font-size: 0;
  background: #000;
}
figure#desk a video { width: 100%; font-size: 0; transition: .6s; }
figure a#estee  {
  transform: translateX(200%) rotateZ(60deg);
  transition: 2s;
}
figure:hover a#estee  { transform: translateX(30%) rotateZ(700deg);
}
figure a#indre {
  top: 300px;
  transform: translateX(220%) rotateZ(48deg);
  transition: 2s .4s;
}
figure#desk:hover a#indre {
  transform: translateX(100%) rotateZ(360deg);
}
figure#desk:hover {
  transform: rotateX(10deg);
}
figure#desk a:hover video { opacity: 0.5; }
figure#desk a:before {
  content: "play";
  font-size: 30px;
  position: absolute;
  top: 45%; left: 45%;
  color: #fff;
  opacity: 0;
  transition: .3s;
}
figure#desk a:hover:before { opacity: 1; }
figure#desk a.playing:hover:before {
  content: none;
  opacity: 0;
}
figure#desk a.playing video { opacity: 1; }
</style>
<script src="js/prefixfree.min.js"></script>

2、在body引入下面的代码：

<figure id="desk">
<a href="#" id="estee">
<!--视频缩略图-->
  <video poster="http://demosthenes.info/assets/images/estee.jpg">
<!--视频地址-->
    <source src="http://demosthenes.info/assets/videos/estee.mp4" type="video/mpeg">
    <source src="http://demosthenes.info/assets/videos/estee.webm" type="video/webm">
</video>
</a>
<a href="#" id="indre">
<!--视频缩略图-->
<video poster="http://demosthenes.info/assets/images/indre.jpg">
<!--视频地址-->
    <source src="http://demosthenes.info/assets/videos/indre.mp4" type="video/mpeg">
    <source src="http://demosthenes.info/assets/videos/indre.webm" type="video/webm">
</video>
</a>
</figure>
<script src='http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js'></script>
<script src="js/index.js"></script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！