zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    tensorflow1.0 矩阵相乘
    tensorflow1.0 变量加法
    python 给字典按值排序,同样适合于其他
    pytorch 孪生神经网络DNN
    python 利用numpy同时打乱列表的顺序,同时打乱数据和标签的顺序
    python os模块获取指定目录下的文件列表
    创建自定义ssl证书用于https
    使用Maven命令行下载依赖库
    JAVA入门各种API参考
    在centos 6.9 x64下安装code::blocks步骤
  • 原文地址:https://www.cnblogs.com/chengfengchi/p/13539343.html
Copyright © 2011-2022 走看看