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>
3D图片切片滑块旋转动画由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/jQuerytexiao/8113.html
源码搜藏承诺：本站所有资源无病毒，无弹窗，无干扰链接！
下一篇：jquery密码强度智能判断特效
jQuery带左侧缩略图图片切换
jQuery多张图片上传预览代码
jQuery螺纹旋转切换图片特效
jQuery图片散乱无序排列样式代码
jQuery带聚焦效果图片切换代码