js拖拽3D立方体旋转

  这段时间有点闲，所以就自己找些小玩意来练习练习。今天做了一个可以拖拽页面内空白位置3D立方体就会跟着转动的小例子，布局方面用到css3 3D转换技术，通过transform控制旋转实现的。

上个图

 

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
    *{
        padding: 0;
        margin: 0;
    }
    #experiment{
        -webkit-perspective: 800;
        -webkit-perspective-origin: 50% 50%;
    }
    #cube{
        position: relative;
        margin: 200px auto;
        width: 200px;
        height: 200px;
        -webkit-transform-style: preserve-3d;
        cursor: pointer;
    }
    .face{
        position: absolute;
        width: 160px;
        height: 160px;
        line-height: 160px;
        text-align: center;
        padding: 20px;
        font-weight: bold;
        color: #fff;
        background: #000;
        font-size: 160px;
        -webkit-transition: -webkit-transform 1s linear;
        opacity: 0.8;
    }
    .face:nth-child(2){
        -webkit-transform-origin: right;
        -webkit-transform: rotateY(-90deg);
        background: red;
    }
    .face:nth-child(3){
        -webkit-transform-origin: left;
        -webkit-transform: rotateY(90deg);
        background: yellow;
    }
    .face:nth-child(4){
        -webkit-transform-origin: top;
        -webkit-transform: rotateX(-90deg);
        background: blue;
    }
    .face:nth-child(5){
        -webkit-transform-origin: bottom;
        -webkit-transform: rotateX(90deg);
        background: green;
    }
    .face:nth-child(6){
        -webkit-transform: translateZ(-200px);
        background: gray;
    }
</style>
</head>
<body>
    <div id="experiment">
        <div id="cube">
            <div class="face" id="face1"></div>
            <div class="face" id="face2"></div>
            <div class="face" id="face3"></div>
            <div class="face" id="face4"></div>
            <div class="face" id="face5"></div>
            <div class="face" id="face6"></div>
        </div>
    </div>

<script>
    document.onmousedown= function(event){
        var that = document.getElementById('cube');
        var reg = /\-?[0-9]+\.?[0-9]*/g;
        var bf = that.style.webkitTransform || '0,0';
        var arr = bf.match(reg);
        var bfX = Number(arr[0]);
        var bfY = Number(arr[1]);
        var startX = event.pageX;
        var startY = event.pageY;
        document.onmousemove= function(event) {
            var disX = event.pageX - startX ;
            var disY = event.pageY - startY ;
            var y=(disX+bfY)%360;
            var x=(disY+bfX)%360;
            that.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ(0deg)";
        };

        document.onmouseup=function(event) {
            document.onmousemove=null;
            document.onmouseup=null;
        };
        return false;
    }

</script>
</body>
</html>

 

 

posted @ 2016-06-13 09:53  Jerry24  阅读(1242)  评论(0)  编辑  收藏  举报