<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D图片切片滑块旋转动画</title>
<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;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
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) {
-webkit-transform: translateZ(10em);
-moz-transform: translateZ(10em);
-o-transform: translateZ(10em);
transform: translateZ(10em);
}
.face:nth-child(2) {
-webkit-transform: rotateY(180deg) translateZ(10em);
-moz-transform: rotateY(180deg) translateZ(10em);
-o-transform: rotateY(180deg) translateZ(10em);
transform: rotateY(180deg) translateZ(10em);
}
.face:nth-child(3) {
-webkit-transform: rotateY(90deg) translateZ(10em);
-moz-transform: rotateY(90deg) translateZ(10em);
-o-transform: rotateY(90deg) translateZ(10em);
transform: rotateY(90deg) translateZ(10em);
}
.face:nth-child(4) {
-webkit-transform: rotateY(-90deg) translateZ(10em);
-moz-transform: rotateY(-90deg) translateZ(10em);
-o-transform: rotateY(-90deg) translateZ(10em);
transform: rotateY(-90deg) translateZ(10em);
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<ul id="level0" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level1" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level2" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level3" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level4" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level5" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level6" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level7" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level8" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level9" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level10" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level11" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<ul id="level12" class='cube'>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
<li class='face'></li>
</ul>
<script src='js/jquery.js'></script>
<script src='js/TweenMax.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
html5实现的鼠标拖动图片3D旋转动画效果源码.zip
版权申诉
177 浏览量
2022-11-04
23:40:55
上传
评论
收藏 150KB ZIP 举报
毕业_设计
- 粉丝: 1935
- 资源: 1万+
最新资源
- TG-2024-05-23-204718255.mp4
- 候志强@181 5428 8938_20240420112107.amr
- spispispispispi
- 实验二:IP协议分析.zip
- 驱动代码驱动代码驱动代码驱动代码
- SVID_20240523_141155_1.mp4
- Code for the complete guide to tkinter tutorial
- 关于百货中心供应链管理系统.zip
- SimpleFolderIcon-master 修改Unity的Project下的文件夹图标
- A python Tkinter widget to display tile based maps
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈