html css 制作方盒 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

    <style>
        /* 使背面不可见！ */
        /* .box div {

            backface-visibility: hidden;
        } */

        .box {
            /* perspective: 1200px; */
        }

        .box {
            width: 300px;
            height: 300px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            /* 3D的空间 */
            transform-style: preserve-3d;
             transform: rotateX(20deg) rotateY(20deg);
        }

        .box div {
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 100px;
            font-weight: bolder;
            color: #fff;
            /* 让6个面全部定位在父元素里面 */
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0.5;
            /* 透明 */
            border: 2px solid #000;
        }

        .con1 {
            /* 第一个面往前走 */
            background: red;
            transform: translateZ(150px);
        }

        .con2 {
            /* 第二个面往后走 */
            background: blue;
            transform: translateZ(-150px) rotateY(180deg);
            /*rotateY(180deg)  让正面朝外*/
        }

        .con3 {
            /* 先往上位移150px  再绕着X轴转动90deg */
            background: pink;
            transform: translateY(-150px) rotateX(90deg);
        }

        .con4 {
            /* 先往下位移150px,再绕着X轴转动90deg */
            background: green;
            transform: translateY(150px) rotateX(-90deg);
        }

        .con5 {
            /* 先往左位移150px , 再绕着Y轴转动90deg */
            background: rosybrown;
            transform: translateX(-150px) rotateY(-90deg);
        }

        .con6 {
            /* 先往右侧位移150px,再绕着Y轴转动90deg */
            background: #000;
            transform: translateX(150px) rotateY(90deg);
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="con1">1</div>
        <div class="con2">2</div>
        <div class="con3">3</div>
        <div class="con4">4</div>
        <div class="con5">5</div>
        <div class="con6">6</div>
    </div>

</body>
<script>
    // rotateX(20deg) rotateY(20deg);
    a = 1
    setInterval(() => {
        a = a + 50
        console.log(a)
        $('.box').css({
            "transform": "rotateX(" + a + "deg) rotateY(" + a + "deg)",
        });
    }, 1000);

</script>

</html>

 

posted @ 2020-08-21 09:35  酷酷的城池  阅读(440)  评论(0)    收藏  举报