用CSS3制作精美的立体盒子装饰(附带制作过程和完整示例)_css3d立体盒子设计过程说明-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43641850/article/details/108030048

本文详细介绍了如何使用CSS3创建精美的立体盒子装饰，包括定位容器、构建小正方体和大正方体的步骤，以及实现自动旋转效果。通过引入图片、设置立体样式和应用CSS3的transform属性，逐步打造出动态的3D视觉效果。

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

先来看看这个肥宅盒子的效果
gif效果不好，实际效果可以看看这个示例

在这里插入图片描述

怎么样，是不是很有意思呢？制作起来其实也不是很难的, 一步一步来

1.容器

1.1 定位容器

首先我们需要一个容器（wrap）来确定肥宅盒子在浏览器中的位置（为了节省空间已省略部分html）

灰色部分

<style>
.wrap{
    
    width: 100px;
    height: 100px;
    margin: 150px auto;
    background: gray;	/* 方便观察div位置 */
}
</style>
<div class="wrap"></div>

1.2 承载容器

在容器wrap里还需要加一个用于承载正方体的容器（cube）。打个比喻，有点像是器皿的底座这样子

绿色部分

<style>
.wrap{
    
    width: 100px;
    height: 100px;
    margin: 150px auto;
    position: relative;
    background: gray;
}
.cube{
    
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background:greenyellow;
    transform-style: preserve-3d; 
}
</style>
<div class="wrap">
    <div class="cube"></div>
</div>

好的，我们的底座已经完成了，是时候实现一个立体的小正方体了。

2.小正方体

2.1 引入图片

首先引入6张图片作为6个面（由于重叠，引入后暂时只能看到一张图片），并设定大小

<style>
/* 内部小正方体表面 */
.cube .in {
    
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}
/* 表面图片 */
.cube .in_pic {
    
    width: 100px;
    height: 100px;
}
</style>
<div class="wrap">
    <div class="cube">
        <span class="front_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/pic@master/post/cssBox/1.png" class="in_pic" />
        </span>
        <span class="back_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/pic@master/post/cssBox/2.png" class="in_pic" />
        </span>
        <span class="left_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/pic@master/post/cssBox/3.png" class="in_pic" />
        </span>
        <span class="right_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/pic@master/post/cssBox/4.png" class="in_pic" />
        </span>
        <span class="top_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/pic@master/post/cssBox/5.png" class="in_pic" />
        </span>
        <span class="bottom_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/pic@master/post/css