利用HTML+CSS,写出一个正方体并实现透视效果

最新推荐文章于 2021-08-09 16:22:58 发布

其浩

最新推荐文章于 2021-08-09 16:22:58 发布

阅读量1.2k

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/J_LAIDA/article/details/106459517

版权

HTML+CSS,写出一个正方体并实现透视效果

首先写一个正方体我们需要了解CSS中的2D和3D属性。

W3C教程

transform-style: preserve-3d;：这个属性必不可少
translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 X轴坐标和Y 轴坐标位置参数。
rotateX()：通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转
rotateY()：通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转
rotateZ()：通过 rotateZ() 方法，元素围绕其 Z 轴以给定的度数进行旋转

了解知道以上属性后就可以进行编写。

具体代码如下：

HTML部分

<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>
        <div class="five"></div>
        <div class="six"></div>
    </div>
</body>

CSS部分

 <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            transform: translate(-50%,-50%) rotateX(45deg) rotateY(45deg);
            transform-style: preserve-3d;
        }
        .box div{
            width: 200px;
            height: 200px;
            border: black 1px solid;
            position: absolute;
            // 给盒子进行定位，将全部盒子合并在一起
            left: 400px;
            top: 250px;
            opacity: 0.5;
            // 给所有盒子设置一个透视属性
        }
        .one{
            background: red;
            transform: translate(-50%,-50%);
            transform: translateZ(100px);
        }
        .two{
            background: yellow;
            transform: translate(-50%,-50%);
            transform: translateZ(-100px);
        }
        .three{
            background: green;
            transform: translate(-50%,0) translateX(200px) rotateY(90deg);
        }
        .four{
            background: blue;
            transform: translate(-50%,0) translateX(0px) rotateY(90deg);
        }
        .five{
            transform: translate(-50%,-50%) translateX(100px) rotateX(90deg);
            background: blueviolet;
        }
        .six{
            transform: translate(0%,-50%) translateY(200px) rotateX(90deg);
            background: brown;
        }
    </style>