立方体效果

作者: itdingrui | 来源:发表于2016-12-05 00:34 被阅读0次

iOS 动画 -- Chapter 4
立方体效果
C++新手必备：基于OpenGL简单实现3d立方体
如何在 kitten 里生成动态个数个立方体(水平方向平铺)
（图文+视频）C4D野教程：我又做了一个奇怪的立方体
011-GLKit绘制旋转立方体
WebGL中绘制立方体
C4D基础（11）-效果器基础原理
CSS3实现3D立方体
【2018-10-03】数据立方体技术

初始值：景深和旋转 transform:perspective(1000px) rotateY(-60deg) rotateX(30deg)

点击鼠标设定初始值x=30 y=-60;
var disX=oEvent.clientX-x;
var disY=oEvent.clientY-y;
样式设定：
上 transform:translateY(-150px) rotateX(90deg);
下 transform:translateY(150px) rotateX(-90deg);
前 transform:translateZ(150px);
后 transform:translateZ(-150px);
左 transform:translateX(-150px) rotateY(90deg); }
右 transform:translateX(150px) rotateY(-90deg); }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{ margin:0; padding:0; }
    .box{ width:300px;
          height:300px;
          margin:100px auto;
          position:relative;
          transform-style:preserve-3d;
          transition:1s all ease ;
          transform:perspective(1000px) rotateY(-60deg) rotateX(30deg)
    }
    .box div{
        position:absolute;
        left:0;
        top:0;
        width:100%;
        height:100%;
        line-height:300px;
        text-align:center;
        font-size:50px;
        color:#fff;
        opacity:0.5;
    }
    .box .front{
        background:red;
        transform:translateZ(150px);
    }
    .box .back{
        background:yellow;
        transform:translateZ(-150px);
    }
    .box .left{
        background:blue;
        transform:translateX(-150px) rotateY(90deg); }
    .box .right{
        background:green;
        transform:translateX(150px) rotateY(-90deg); }
    .box .top{
        background:pink;
        transform:translateY(-150px) rotateX(90deg);
    }
    .box .bottom{
        background:#f84540;
        transform:translateY(150px) rotateX(-90deg);
    }
</style>
<script>
    window.onload=function(){
        var oDiv=document.querySelector('#box');
        var x=30;
        var y=-60;
        oDiv.onmousedown=function(ev){
            var oEvent=ev||event;
            var disX=oEvent.clientX-x;
            var disY=oEvent.clientY-y;
            document.onmousemove=function(ev){
                var oEvent=ev||event;
                var x=oEvent.clientX-disX;
                var y=oEvent.clientY-disY;
                oDiv.style.WebkitTransform='perspective(1000px) rotateY('+x+'deg) rotateX('+(-y)+'deg)';
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                };
                return false;
            };
        };
    };
</script>
<body>
<div id="box" class="box">
    <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>
</body>
</html>
<script>

</script>