<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 GSAP CSS3 3D图片贴皮箱体</title>
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
height: 100vh;
margin: 0;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
body.batman,
body {
background: #878782;
}
body.superman {
background: #21A3F2;
}
body.spiderman {
background: #F22127;
}
body.wolverine {
background: #F2CB21;
}
main {
display: inline-block;
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.scene {
-webkit-perspective: 1000px;
perspective: 1000px;
position: relative;
width: 357px;
height: 526px;
}
.cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(-178.5px);
transform: translateZ(-178.5px);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.cube img {
pointer-events: none;
}
.box {
display: block;
position: absolute;
margin: 0;
}
.box.front {
-webkit-transform: rotateY(0deg) translateZ(178.5px);
transform: rotateY(0deg) translateZ(178.5px);
width: 357px;
height: 526px;
}
.box.back {
-webkit-transform: rotateY(180deg) translateZ(178.5px);
transform: rotateY(180deg) translateZ(178.5px);
width: 357px;
height: 526px;
}
.box.left {
-webkit-transform: rotateY(-90deg) translateZ(178.5px);
transform: rotateY(-90deg) translateZ(178.5px);
width: 357px;
height: 526px;
}
.box.right {
-webkit-transform: rotateY(90deg) translateZ(178.5px);
transform: rotateY(90deg) translateZ(178.5px);
width: 357px;
height: 526px;
}
.box.top {
-webkit-transform: rotateX(90deg) translateZ(178.5px);
transform: rotateX(90deg) translateZ(178.5px);
width: 357px;
height: 357px;
}
.box.bottom {
-webkit-transform: rotateX(-90deg) translateZ(calc(357px - 10px));
transform: rotateX(-90deg) translateZ(calc(357px - 10px));
width: 357px;
height: 357px;
}
.box.front img,
.box.back img,
.box.left img,
.box.right img {
width: 100%;
height: 100%;
}
.box.top,
.box.bottom {
background: #fff;
}
.box.top img,
.box.bottom img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<main>
<section class='scene'>
<div class="cube">
<div class='box front'>
<img src="images/kate-moss.png" alt="" />
</div>
<div class='box back'>
<img src="images/miranda-kerr.png" alt="" />
</div>
<div class='box left'>
<img src="images/aline-weber_copy.png" alt="" />
</div>
<div class='box right'>
<img src="images/karlie-kloss.png" alt="" />
</div>
<div class='box top'>
<img src="images/posy.jpg" alt="" />
</div>
<div class='box bottom'>
<img src="images/negy.jpg" alt="" />
</div>
</div>
</section>
</main>
<script src="js/TweenMax.1.18.5.min.js"></script>
<script>
/**
* Coskun Baris, coskunbaris.com
*/
var cube = {
selector: $('.cube'),
touchSelector: document.querySelector('.cube'),
scene: $('.scene'),
rotateX: 0,
rotateY: 0,
delay: .3,
ease: Elastic.easeNone,
sensation: 5,
toLeft: function(distance) {
TweenMax.to(this.selector, this.delay, {
rotationY: '-=' + distance / cube.sensation,
ease: cube.ease,
onComplete: function() {
cube.updateRotate();
bgListener();
}
});
},
toRight: function(distance) {
TweenMax.to(this.selector, this.delay, {
rotationY: '+=' + distance / cube.sensation,
ease: cube.ease,
onComplete: function() {
cube.updateRotate();
bgListener();
}
});
},
toUp: function(distance) {
TweenMax.to(this.selector, this.delay, {
rotationX: '+=' + distance / cube.sensation,
ease: cube.ease,
onComplete: function() {
cube.updateRotate();
bgListener();
}
});
},
toDown: function(distance) {
TweenMax.to(this.selector, this.delay, {
rotationX: '-=' + distance / cube.sensation,
ease: cube.ease,
onComplete: function() {
cube.updateRotate();
bgListener();
}
});
},
updateRotate: function() {
if (cube.selector["0"]._gsTransform.rotationY <= -360) {
this.selector["0"]._gsTransform.rotationY += 360;
this.rotateX = cube.selector["0"]._gsTransform.rotationX;
this.rotateY = cube.selector["0"]._gsTransform.rotationY;
}
if (cube.selector["0"]._gsTransform.rotationY >= 360) {
this.selector["0"]._gsTransform.rotationY -= 360;
this.rotateX = cube.selector["0"]._gsTransform.rotationX;
this.rotateY = cube.selector["0"]._gsTransform.rotationY;
} else {
this.rotateX = cube.selector["0"]._gsTransform.rotationX;
this.rotateY = cube.selector["0"]._gsTransform.rotationY;
}
}
};
var swiper = {
directionX: null,
directionY: null,
firstX: null,
lastX: null,
firstY: null,
lastY: null,
distanceX: null,
distanceY: null
};
/*SWIPER*/
/*----------------------------------------*/
function firstPosition(event) {
swiper.firstX = event.pageX;
swiper.firstY = event.pageY;
}
function lastPosition(event) {
swiper.lastX = event.pageX;
swiper.lastY = event.pageY;
}
function directionControl() {
swiper.firstX > swiper.lastX ? swiper.directionX = 'left' : swiper.directionX = 'right';
swiper.firstY > swiper.lastY ? swiper.directionY = 'up' : swiper.directionY = 'down';
}
function distanceControl() {
swiper.directionX == 'right' ? swiper.distanceX = swiper.lastX - swiper.firstX : swiper.distanceX = swiper.firstX - swiper.lastX;
swiper.directionY == 'down' ? swiper.distanceY = swiper.lastY - swiper.firstY : swiper.distanceY = swiper.firstY - swiper.lastY;
}
/*BACKGROUND*/
/*----------------------------------------*/
function bgListener() {
var frontQuery = (cube.rotateY > -45 && cube.rotateY < 45);
var backQuery = ((cube.rotateY > -225 && cube.rotateY < -135) || (cube.rotateY > 135 && cube.rotateY < 225));
var rightQuery = ((cube.rotateY > -135 && cube.rotateY < -45) || (cube.rotateY > 225 && cube.rotateY < 315));
var leftQuery = ((cube.rotateY > -315 && cube.rotateY < -225) || (cube.rotateY > 45 && cube.rotateY < 135));
if (frontQuery) {
$('body').addClass('batman').removeClass('spiderman wolverine superman');
} else if (backQuery) {
$('body').addClass('superman').removeClass('spiderman wolverine batman');
} else if (rightQuery) {
$('body').addClass('wolverine').removeClass('spiderman superman batman');
} else if (leftQuery) {
$('body').addClass('spiderman').removeClass('wolverine superman batman');
}
}
/*CUBE ROTATE*/
/*---
HTML5+GSAP+CSS3实现的3D图片贴图可旋转立方体特效源码.zip （9个子文件） 
132689878097718957 images 
miranda-kerr.png 254KB
negy.jpg 117KB posy.jpg 34KB aline-weber_copy.png 314KB kate-moss.png 249KB karlie-kloss.png 319KB
index.html 11KB js 
jquery-1.11.1.min.js 94KB TweenMax.1.18.5.min.js 108KB资源评论
易小侠
- 粉丝: 6595
- 资源: 9万+
