HTML+CSS 综合案例 旋转立方

一、前言

制作一个网页中会旋转的立方体。

二、、核心代码

1、使用标签设计出立方体的六个面

<div id="box">
            <div id="front"></div>
            <div id="back"></div>
            <div id="left"></div>
            <div id="right"></div>
            <div id="top"></div>
            <div id="bottom"></div>
        </div>

2、设计出六个面的样式

#box div{
                width: 200px;
                height: 200px;
                border: 1px solid red;/*块的边框*/
                
                /*把六个面层叠到一块*/
                position: absolute;
                top:100px;
                left:100px;
            }

3、制作正方体的前后面

#front{
                transform:translateZ(100px);   /*沿着z轴平移*/