Html-特效 3D魔盒_css

Html-特效 3D魔盒_html_02

体验地址:​​http://www.boommanpro.cn/3Dbox/​​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>{
            margin:0;
            padding:0;
        }

        body {
            position: relative;
            perspective:1200px;
        }

        .boxDiv {
            width:150px;
            height:200px;
            position: absolute;
            top:0px;
            left:0px;
            transform-style:3d;
        }

        .boxDiv div {
            position: absolute;

        }

        .front {
            width:150px;
            height:200px;
            top:0px;
            left:0px;
            background:#fa91fd;
            transform:translateZ(100px);
        }

        .back {
            width:150px;
            height:200px;
            top:0px;
            left:0px;
            background:#00FF00;
            transform:translateZ(-100px);
        }

        .top {
            width:150px;
            height:200px;
            top:200px;
            left:0px;
            background:#ff1122;
            transform-origin: bottom;
            transform:translateZ(100px) rotateX(90deg);
        }

        .bottom {
            width:150px;
            height:200px;
            top:200px;
            left:0px;
            background:#f12345;
            transform-origin: top;
            transform:translateZ(100px) rotateX(-90deg);
        }

        .left {
            width:200px;
            height:200px;
            top:0px;
            left:200px;
            transform-origin: right;
            background:#ff6700;
            transform:translateZ(100px) rotateY(-90deg);
        }

        .right {
            width:200px;
            height:200px;
            top:0px;
            left:150px;
            transform-origin: left;
            background:#f12345;
            transform:translateZ(100px) rotateY(90deg);
        }</style>
</head>
<body>
<div class="boxDiv">
    <div class="front"></div>
    <div class="back"></div>
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
<script>function ()
        init();
        var boxMoveFlag = false;
        var rotateFlag = false;

        var moveX;
        var moveY;
        var lastX;
        var lastY;
        var wrapDegX=8;
        var wrapDegY=0;
        var startX;
        var startY;
        $(document).bind("mousemove", function (event)

            if (boxMoveFlag) {
                $(".boxDiv").css('top', (event.pageY - moveY) + 'px');
                $(".boxDiv").css('left', ( event.pageX - moveX) + 'px');
            }else if(rotateFlag){
                lastX=event.pageX||event.clientX;
                lastY=event.pageY||event.clientY;
                wrapDegY+=(lastX-moveX)*0.01;
                wrapDegX+=(lastY-moveY)*0.01;
                $(".boxDiv").css({"transform":"rotateX("+wrapDegX+"deg) rotateY("+wrapDegY+"deg) "});
                startX=lastX;
                startY=lastY;
            }

        })

        $(".boxDiv").bind("mousedown", function (event)
            moveX = event.pageX - $(".boxDiv").offset().left;
            moveY = event.pageY - $(".boxDiv").offset().top;
            boxMoveFlag = true;

        })
        $(".boxDiv").bind("mouseup", function ()
            boxMoveFlag = false;
        })
        $(document).bind("mousedown",function ()
            moveX = event.pageX - $(".boxDiv").offset().left;
            moveY = event.pageY - $(".boxDiv").offset().top;
            rotateFlag=true;
        })
        $(document).bind("mouseup",function ()
            rotateFlag=false;
        })
    })

    function init()
        $(".boxDiv").css({
            left: ($(window).width() - $('.boxDiv').outerWidth()) / 2,
            top: ($(window).height() - $('.boxDiv').outerHeight()) / 2</script>
</body>
</html>

总结

在3D转动的时候，转动的是一个div或者是一个点，其他的面都将其包裹起来。