当前位置:首页 > 网页特效 > jQuery特效 >

3D图片切片滑块旋转动画

时间:2014-05-28 23:19 来源:互联网 作者:源码搜藏 收藏 推荐

  • 广告推荐
效果预览 立即下载

3D图片切片滑块旋转动画3D图片切片滑块旋转动画是一款只需要在图片上面拖动鼠标,图片即会在垂直方向分裂出数块小长方体,然后每一个小长方体沿着鼠标拖动的方向旋转。jQueryHTML53D效果动画效果 所属专题:图片代码

    <style>
/**************************************************/
/* INSTRUCTIONS: DRAG OVER THE IMAGE TO TWIST IT */
/**************************************************/
body {
  perspective: 50em;
  background-color: #333333;
}
 
.cube {
  position: relative;
  margin: 0em auto 0;
  padding: 0px;
  width: 20em;
  height: 3.0em;
  list-style: none;
  transform-style: preserve-3d;
  /*animation: ani 8s infinite linear;*/
}
 
.face {
  box-sizing: border-box;
  position: absolute;
  top: 180px;
  left: 50%;
  /*border: 1px solid #f0f0f0;*/
  margin: -8em;
  padding: 1.6em;
  width: 20em;
  height: 2em;
  opacity: .85;
  background: lightblue;
  /*Creative Commons image from http://www.flickr.com/photos/37825670@N07/3562600154/sizes/z/in/photostream/ */
  background: url(k6dbiLv.jpg) -115px -900px;
  background-repeat: no-repeat;
  backface-visibility: hidden;
}
 
.face:nth-child(1) {
  transform: translateZ(10em);
}
 
.face:nth-child(2) {
  transform: rotateY(180deg) translateZ(10em);
}
 
.face:nth-child(3) {
  transform: rotateY(90deg) translateZ(10em);
}
 
.face:nth-child(4) {
  transform: rotateY(-90deg) translateZ(10em);
}
 
a {
  color: #ccc;
}
 
</style>
 
    <script src="js/prefixfree.min.js"></script>
本站资源仅限于学习研究,严禁从事商业或者非法活动! 源码搜藏网所有源码来自互联网转载与用户上传分享,如果侵犯了您的权益请与我们联系,我们将在24小时内删除!谢谢!

jQuery特效下载排行

最新文章