H5制作立方体

今天药忘吃喽~ 2022-05-10 07:50 214阅读 0赞

这几天在学习H5，使用它做出的页面很炫，下面来一段H5制作的立方体；

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 200px;
                height: 200px;
                margin:100px auto;
                position: relative;
                transform: rotate3d(1,1,0,200deg);
                transform-style: preserve-3d;
                perspective: 0px;
                perspective-origin: 100px 100px;
            }
            .box > div{
                width: 200px;
                height: 200px;
                position: absolute;
                opacity: 0.5;
            }
            .front{
                background-color: red;
                transform: translateZ(100px);
            }
            .back{
                background-color: green;
                transform: translateZ(-100px) rotateY(180deg);
            }
            .left{
                background-color: blue;
                /*移动+旋转*/
                transform: translateX(-100px) rotateY(-90deg);
            }
            .right{
                background-color: pink;
                transform: translateX(100px) rotateY(90deg);
            }
            .top{
                background-color: purple;
                transform: translateY(-100px) rotateX(90deg);
            }
            .bottom{
                background-color: orange;
                transform: translateY(100px) rotateX(-90deg);
            }
        </style>
    </head>
    <body>
    <div class="box">
        <div class="front">front</div>
        <div class="back">back</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="top">top</div>
        <div class="bottom">bottom</div>
    </div>
    </body>
    </html>

写文章是为了记录一下自己一路走来踩过的坑，相当于学习笔记吧。同时，也可以分享一下自己努力的成果。