css3的样式，一个正方体

浏览数：33 / 时间：2015年06月09日

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no;address=no;email=no">
    <title></title>
    <style>
        #div_1{
            -webkit-perspective: 72;
        }
        #div_1_1{
            transform: rotateX(42deg);
        }
        #div_1_1 ::selection{
            background:none;
        }
        .div_class1{
            width: 600px;
            height: 300px;
            border: 1px black solid;
            border-radius: 20px;
            background: cornsilk;
        }
        .div_class1_1{
            width: 200px;
            height: 190px;
            border: 1px rgb(69, 63, 53) solid;
            border-radius: 20px;
            position: relative;
            top: 50px;
            background: #0087ff;
            z-index: 999;
            margin: 0px auto;
            text-align: center;
            vertical-align: middle;
            line-height: 50px;
        }
        .div_a{
            cursor: pointer;
        }
        #div_2_1{
            /*transform: perspective(500px) translateZ(-60px);*/
            transition: transform 3s,background 3s,width 3s,height 3s;
        }
        #div_2_1:hover{
            width: 300px;
            height: 260px;
            background: red;
            -moz-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }
        details{
            cursor: pointer;
        }
        .cubec{
            perspective: 1000px;
            /*background-color: skyblue;*/
            display: inline-block;
            width: 250px;
            height : 250px;
            margin-top: 50px;
        }
        .mainc{
            width: 100%;
            height: 100%;
            display: inline-block;
            transition: all 0.85s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-align: center;
            position: relative;
            transform-style: preserve-3d;
            transform: rotateX(-25deg) rotateY(25deg);
        }
        .mainc div{
            width: 100%;
            height: 100%;
            border: 1px solid #888;
            background: #FFF;
            color: #333;
            line-height: 250px;
            opacity: 0.8;
        }
        .cover_1{
            overflow: hidden;
            position: absolute;
            box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
            transform: translate3d(0, 0, 125px);
        }
        .cover_1_top{
            overflow: hidden;
            position: absolute;
            box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
            transform: rotateX(90deg) translate3d(0px,0px,125px);
        }
        .cover_1_bottom{
            overflow: hidden;
            position: absolute;
            box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
            transform: rotateX(90deg) rotateY(0deg) translate3d(0px,0px,-125px);
        }
        .cover_1_right{
            overflow: hidden;
            position: absolute;
            box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
            transform: rotateX(90deg) rotateY(90deg) translate3d(0px,0px,125px);
        }
        .cover_1_left{
            overflow: hidden;
            position: absolute;
            box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
            transform: rotateX(90deg) rotateY(90deg) translate3d(0px,0px,-125px);
        }
        .cover_1_hou{
            overflow: hidden;
            position: absolute;
            box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3);
            transform: rotateX(0deg) rotateY(0deg) translate3d(0px,0px,-125px);
        }
    </style>
</head>
<body>
    <div class="div_a" onclick="">效果测试1</div>
    <div id="div_1" style="" class="div_class1">
        <div id="div_1_1" class="div_class1_1">
            测试内容
        </div>
    </div>
    <div class="div_a" onclick="">效果测试2</div>
    <div id="div_2" style="" class="div_class1">
        <div id="div_2_1" class="div_class1_1" style="">
            可用作放大缩小旋转的动漫
        </div>
    </div>
    <details open="open">
        <summary>效果测试3</summary>
        <div>
               正方体
                <div class="cubec">
                    <div class="mainc" id="mainc">
                        <div class="cover_1">
                        </div>
                        <div class="cover_1_top">
                        </div>
                        <div class="cover_1_bottom">
                        </div>
                        <div class="cover_1_left">
                        </div>
                        <div class="cover_1_right">
                        </div>
                        <div class="cover_1_hou">
                        </div>
                    </div>
                </div>
        </div>
    </details>
</body>
</html>
<script>
    //  初始化
    document.getElementById(‘mainc‘).style.transform = "rotateX(-25deg) rotateY(25deg)";
    var a;
    var cx = -25;           //  初始x
    var cy = 25;            //  初始y
    var dx;                 //  点击下时的位置
    var dy;                 //  点击下时的位置
    document.onmouseup = function () {
        if (!a)return;
        document.all ? a.releaseCapture() : window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
        a = "";
    };
    document.onmousemove = function (d) {
        if (!a)return;
        if (!d)d = event;
        var tx = d.clientX - dx;
        var ty = d.clientY - dy;

        var wx = tx/20 + cx;
        var wy = ty/20 + cy;
        document.getElementById(‘mainc‘).style.transform = "rotateX("+wx+"deg) rotateY("+wy+"deg)";
        console.log(wx);
    };
    document.onmousedown = function(e){
        document.all ? a.setCapture() : window.captureEvents(Event.MOUSEMOVE);
        dx = e.clientX;
        dy = e.clientY;
        a = 2;
    }



//    document.getElementById(‘mainc‘).style.transform = "rotateX(-35deg) rotateY(35deg)";
//    alert(document.getElementById(‘mainc‘).style.transform);
</script>