HTML5 GSAP CSS3 3D图片贴皮箱体

3D Box Control with TweenMax，3D盒子的背景色会随着贴图的主色调变化。

GSAP, CSS3, cube

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3978
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/**
 * Coskun Baris, coskunbaris.com
 */

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*/
/*----------------------------------------*/
function cubeRotate() {
        if (swiper.directionX == 'left') {
            cube.toLeft(swiper.distanceX);
        } else if (swiper.directionX == 'right') {
            cube.toRight(swiper.distanceX);
        }

if (swiper.directionY == 'up') {
            if (cube.rotateY >= 0 && cube.rotateY < 90) {
                cube.toUp(swiper.distanceY);
            } else if (cube.rotateY >= 90 && cube.rotateY < 180) {
                cube.toDown(swiper.distanceY);
            } else if (cube.rotateY >= 180 && cube.rotateY < 270) {
                cube.toDown(swiper.distanceY);
            } else if (cube.rotateY >= 270 && cube.rotateY < 360) {
                cube.toUp(swiper.distanceY);
            } else if (cube.rotateY <= 0 && cube.rotateY > (-90)) {
                cube.toUp(swiper.distanceY);
            } else if (cube.rotateY <= (-90) && cube.rotateY > (-180)) {
                cube.toDown(swiper.distanceY);
            } else if (cube.rotateY <= (-180) && cube.rotateY > (-270)) {
                cube.toDown(swiper.distanceY);
            } else if (cube.rotateY <= (-270) && cube.rotateY > (-360)) {
                cube.toUp(swiper.distanceY);
            }
        } else if (swiper.directionY == 'down') {
            if (cube.rotateY >= 0 && cube.rotateY < 90) {
                cube.toDown(swiper.distanceY);
            } else if (cube.rotateY >= 90 && cube.rotateY < 180) {
                cube.toUp(swiper.distanceY);
            } else if (cube.rotateY >= 180 && cube.rotateY < 270) {
                cube.toUp(swiper.distanceY);
            } else if (cube.rotateY >= 270 && cube.rotateY < 360) {
                cube.toDown(swiper.distanceY);
            } else if (cube.rotateY <= 0 && cube.rotateY > (-90)) {
                cube.toDown(swiper.distanceY);
            } else if (cube.rotateY <= (-90) && cube.rotateY > (-180)) {
                cube.toUp(swiper.distanceY);
            } else if (cube.rotateY <= (-180) && cube.rotateY > (-270)) {
                cube.toUp(swiper.distanceY);
            } else if (cube.rotateY <= (-270) && cube.rotateY > (-360)) {
                cube.toDown(swiper.distanceY);
            }
        }
    }
    /*----------------------------------------*/

$(function() {
    "use strict";

var touch, onDrag;

cube.selector.on('mousedown', function(event) {
        onDrag = true;

firstPosition(event);

cube.selector.on('mousemove', function(event) {
            if (onDrag === true) {
                lastPosition(event);
                directionControl();
                distanceControl();

cubeRotate();
            }
        });
    });
    cube.selector.bind('mouseup mouseover mouseout', function() {
        onDrag = false;
    });

cube.touchSelector.addEventListener('touchstart', function(event) {
        onDrag = true;
        touch = event.touches[0];
        firstPosition(touch);

cube.touchSelector.addEventListener('touchmove', function(event) {
            if (onDrag === true) {
                touch = event.changedTouches["0"];

lastPosition(touch);
                directionControl();
                distanceControl();
                cubeRotate();
            }
        });
    });
    cube.touchSelector.addEventListener('touchend', function(event) {
        onDrag = false;
    });
});

编译

CSS

*,
*: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%
}

HTML

3D Box Control with TweenMax，3D盒子的背景色会随着贴图的主色调变化。

GSAP, CSS3, cube

编辑器支持Emmet

快捷键

3D Box Control with TweenMax，3D盒子的背景色会随着贴图的主色调变化。

GSAP, CSS3, cube

HTML5 GSAP液体压力泵 | 饮料机

HTML5 GSAP点击立方体起跳动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：