css3立方体实现方式（position+transform）

最新推荐文章于 2025-06-09 18:22:45 发布

原创最新推荐文章于 2025-06-09 18:22:45 发布 · 283 阅读

CC 4.0 BY-SA版权

本文详细介绍了如何使用CSS3的position和transform属性创建一个3D立方体。通过设置六个面的HTML和CSS样式，然后使用absolute定位和transform变形属性，将各个面按顺序展开并旋转到正确位置，最终形成一个完整的立方体效果。同时，文章还展示了半透明的立方体样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建立方体所需要的六个面；
html代码

<ul class="cubic">
        <li>第1个面</li>
        <li>第2个面</li>
        <li>第3个面</li>
        <li>第4个面</li>
        <li>第5个面</li>
        <li>第6个面</li>
    </ul>

css代码

 li{list-style: none;}
        .cubic{
            height:100px;
            width:100px;
            margin:100px auto;
        }
        .cubic li{
            height:100px;
            width:100px;
            text-align:center;
            line-height:100px;   
        }
        .cubic li:nth-child(1){
            background:lightblue;
        }
        .cubic li:nth-child(2){
            background:lightcoral;
        }
        .cubic li:nth-child(3){
            background:lightgray;
        }
        .cubic li:nth-child(4){
            background:lightseagreen;
        }
        .cubic li:nth-child(5){
            background:lightslategray;
        }
        .cubic li:nth-child(6){
            background:lightgoldenrodyellow;
        }

效果图：
在这里插入图片描述
2.给li添加position：absolute；使六个面位于同一位置，方便后面transform移动；

 .cubic li{
            height:100px;
            width:100px;
            text-align:center;
            line-height:100px;
            position:absolute;/*添加positon统一位置*/
        }

在这里插入图片描述
3.利用transform变形属性依次向各个方向左、右、上、下、前、后把六个面展开；

 .cubic li:nth-child(1){
            background:lightblue;/*不移动，保留在最前边的位置*/
        }
        .cubic li:nth-child(2){
            background:lightcoral;
            transform:translatex(-100px);/*移到左边位置*/
        }
        .cubic li:nth-child(3){
            background:lightgray;
            transform:translatex(100px);/*移到右边位置*/
        }
        .cubic li:nth-child(4){
            background:lightseagreen;
            transform:translatey(-100px);/*移到上边位置*/
        }
        .cubic li:nth-child(5){
            background:lightslategray;
            transform:translatey(100px);/*移到下边位置*/
        }
        .cubic li:nth-child(6){
            background:lightgoldenrodyellow;
            transform:translatez(-100px);/*移到后边位置*/
        }

在这里插入图片描述
4.可以给父元素添加以下代码，观察各个面的位置

.cubic{
            height:100px;
            width:100px;
            margin:100px auto;
            transform-style: preserve-3d;/*添加3d模式*/
            transition: 6s;/*添加一定时长，方便观察*/
        }
        .cubic:hover{
            transform: rotateY(360deg);/*添加hover选择观察各个面的立体位置*/
        }

5.利用transform：rotate（）；向相应方向进行旋转，让各个面形成闭合；

 .cubic li:nth-child(1){
            background:lightblue;/*不移动，保留在最前边的位置*/
        }
        .cubic li:nth-child(2){
            background:lightcoral;
            transform:translatex(-100px) rotateY(-90deg);/*移到左边位置*/
            transform-origin: right center;
        }
        .cubic li:nth-child(3){
            background:lightgray;
            transform:translatex(100px) rotateY(90deg);/*移到右边位置*/
            transform-origin: left center;
        }
        .cubic li:nth-child(4){
            background:lightseagreen;
            transform:translatey(-100px) rotatex(90deg);/*移到上边位置*/
            transform-origin: bottom center;
        }
        .cubic li:nth-child(5){
            background:lightslategray;
            transform:translatey(100px) rotatex(-90deg);/*移到下边位置*/
            transform-origin: top center;
        }
        .cubic li:nth-child(6){
            background:lightgoldenrodyellow;
            transform:translatez(-100px) rotatey(-180deg);/*移到后边位置*/
        }

给opacity：0.5后的半透明效果图
在这里插入图片描述
逆站班！！！