JS实现H5图片3D旋转动画

最新推荐文章于 2024-08-15 11:48:00 发布

西兰花的春天

最新推荐文章于 2024-08-15 11:48:00 发布

阅读量1.2w

点赞数 7

分类专栏： js（jquery）/css3 动画特效文章标签： h5动画脚本动画 3d动画 js动画前端动画

js（jquery）/css3 动画特效专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JS实现H5图片3D旋转动画

以下代码，请使用支持H5的浏览器

<!DOCTYPE html>
<html>
<head>
<title>JS3D旋转动画</title>
<style>
body {
perspective: 50em;
background-color: #333333;
color:#fff;
}

.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;

background: url(http://keleyi.com/image/a/wstwx19d.jpg) -15px -90px;
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 type="text/javascript" src="http://keleyi.com/keleyi/phtml/css3/10/prefixfree.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src='http://keleyi.com/keleyi/phtml/html5/24/TweenMax.min.js'></script>
</head>
<body>
<br /><br /><br />


<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 type="text/javascript">

// vars
var gap = 0;
var slow = 7;
var md = false;
var oldMouseX = 0;
var mouseX = 0;
var mouseY = 0;
var numLevels = 13;
var gaps = [];
var gapscnt = 0;
var currentLevel = 0;
var px = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var vx = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init()

function tickHandler() {
//run your logic here...
if (md) {
gap = averageGaps(mouseX - oldMouseX);
}
gap *= .9;
vx[currentLevel] += gap;
oldMouseX = mouseX;
var i;
for (i = currentLevel; i < numLevels; i++) {
vx[i + 1] += ((vx[i] - vx[i + 1]) / slow);
}
for (i = currentLevel; i > 0; i--) {
vx[i - 1] += (vx[i] - vx[i - 1]) / slow;
}
for (i = 0; i < numLevels; i++) {
px[i] += (vx[i] - px[i]);
// trying tweenmax duration 0 method of setting rotationY 
TweenMax.to($('#level' + i), 0, { rotationY: px[i] });
}
}



// functions 
function init() {
// code for cube
var d = 0.12; var p = 3;
for (var i = 0; i < numLevels; i++) {
var posString = "-115px " + (-48 * i) + "px";
TweenMax.to($('#level' + i + ' li'), 1, { css: { backgroundPosition: posString }, delay: (d * i) });
}
TweenLite.ticker.addEventListener("tick", tickHandler);
$('.cube').mouseover(function () {
TweenMax.to($('.face'), 1, { opacity: 1 });
});
$('.cube').mouseout(function () {
TweenMax.to($('.face'), 1, { opacity: .85 });
});
$(document).on('mousedown', function (event) {
event.preventDefault();
oldMouseX = mouseX;
gaps.length = 0;
md = true;
}).on('mouseup', function (event) {
md = false;
}).on('mousemove', function (event) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
});



$('#level0').mousedown(function () { currentLevel = 0; });
$('#level1').mousedown(function () { currentLevel = 1; });
$('#level2').mousedown(function () { currentLevel = 2; });
$('#level3').mousedown(function () { currentLevel = 3; });
$('#level4').mousedown(function () { currentLevel = 4; });
$('#level5').mousedown(function () { currentLevel = 5; });
$('#level6').mousedown(function () { currentLevel = 6; });
$('#level7').mousedown(function () { currentLevel = 7; });
$('#level8').mousedown(function () { currentLevel = 8; });
$('#level9').mousedown(function () { currentLevel = 9; });
$('#level10').mousedown(function () { currentLevel = 10; });
$('#level11').mousedown(function () { currentLevel = 11; });
$('#level12').mousedown(function () { currentLevel = 12; });




var touchEnabled = 'ontouchstart' in window || navigator.msMaxTouchPoints;
if (touchEnabled == true) {
console.log("touchEnabled");
document.addEventListener('touchmove', onTouchMove, false);
document.addEventListener('touchstart', onTouchStart, false);
document.addEventListener('touchend', onTouchEnd, false);
}

}


function onTouchMove(event) {
event.preventDefault();
var touch = event.touches[0];
mouseX = touch.pageX - windowHalfX;
mouseY = touch.pageY - windowHalfY;
}

function onTouchStart(event) {
event.preventDefault();
oldMouseX = mouseX;
gaps.length = 0;
md = true;
}

function onTouchEnd(event) {
event.preventDefault();
md = false;
}


function averageGaps(n) {
if (isNaN(n)) { return 0; }
var gl = gaps.length;
gaps[gapscnt] = n;
var ave = 0;
for (var i = 0; i < gl; i++) {
ave += gaps[i];
};
gapscnt = (gapscnt + 1) % 10;
var tmp = ave / gl;
if (isNaN(tmp)) { tmp = 0; }
return tmp;
}
</script>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>

文章转自：http://www.qdfuns.com/notes/22765/f68be5e60e8922bcff517debfb3bdf77.html