欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

用CSS3制作精美的立体盒子装饰(附带制作过程和完整示例)

程序员文章站 2022-07-12 23:33:28
...

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

用CSS3制作精美的立体盒子装饰(附带制作过程和完整示例)

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

1.容器

1.1 定位容器

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

用CSS3制作精美的立体盒子装饰(附带制作过程和完整示例)

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

1.2 承载容器

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

用CSS3制作精美的立体盒子装饰(附带制作过程和完整示例)

<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个面（由于重叠，引入后暂时只能看到一张图片），并设定大小

用CSS3制作精美的立体盒子装饰(附带制作过程和完整示例)

<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/aaa@qq.com/post/cssBox/1.png" class="in_pic" />
        </span>
        <span class="back_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/2.png" class="in_pic" />
        </span>
        <span class="left_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/3.png" class="in_pic" />
        </span>
        <span class="right_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/4.png" class="in_pic" />
        </span>
        <span class="top_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/5.png" class="in_pic" />
        </span>
        <span class="bottom_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/6.png" class="in_pic" />
        </span>     
    </div>
</div>

2.2 立体构建

接下来我们让每个面都旋转、移动到正确的位置。为每个面添加css

<style>
/* 每个面都有自己的坐标轴XYZ，参考高考的几何题 */
.cube .front_in {
    /* 绕自身Y轴旋转0°, 再沿Z轴平移50px */
    transform: rotateY(0deg) translateZ(50px);
}
.cube .back_in {
    transform: rotateY(180deg) translateZ(50px);
}
.cube .left_in {
    /* 绕自身Y轴旋转90°，再沿Z轴平移50px */
    transform: rotateY(90deg) translateZ(50px) ;
}
.cube .right_in {
    transform: rotateY(-90deg) translateZ(50px);
}
.cube .top_in {
    /* 绕自身Y轴旋转90°，再沿Z轴平移 */
    transform: rotateX(90deg) translateZ(50px);
}
.cube .bottom_in {
    transform: rotateX(-90deg) translateZ(50px);
}
</style>

2.3 倾斜

由于我们是从正面看过去的，所以目前还是只能看到一个面，只需要给底座.cube添加一个倾斜角度就可以看到立体的正方体了

.cube{
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background:greenyellow;
    transform-style: preserve-3d; 
	transform: rotateX(45deg) rotateY(45deg); /* 倾斜角度 */
}

用CSS3制作精美的立体盒子装饰(附带制作过程和完整示例)

3. 大正方体

3.1 立体样式+图片

搞出小正方体后，同理可实现外部的大正方体, 对应的css如下

<style>
/* 外部正方体 */
.cube .out{
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    /* hover过渡时间 */
    transition: all 0.4s;
}
/* 外部正方体表面图片 */
.pic {
    width: 200px;
    height: 200px;
}
.cube .front_out {
    transform: rotateY(0deg) translateZ(100px);
}
.cube .back_out {
    transform: rotateY(180deg) translateZ(100px);
}
.cube .left_out {
    transform: rotateY(90deg) translateZ(100px);
}
.cube .right_out {
    transform: rotateY(-90deg) translateZ(100px);
}
.cube .top_out {
    transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom_out {
    transform: rotateX(-90deg) translateZ(100px);
}
    
/* 鼠标悬浮(hover)时撑开各个面的效果 */
.cube:hover .front_out {
    transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .back_out {
    transform: rotateY(180deg) translateZ(200px);
}
.cube:hover .left_out {
    transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .right_out {
    transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .top_out {
    transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .bottom_out {
    transform: rotateX(-90deg) translateZ(200px);
}    
</style>

引入外部表面6张图片

<!-- 外部正方体 -->
<span class="front_out out">
    <img src="https://i.loli.net/2018/05/03/5aeb0eef73838.jpg" class="pic" />
</span>
<span class="back_out out">
    <img src="https://i.loli.net/2018/05/03/5aeb0f2fb9a83.jpg" class="pic" />
</span>
<span class="left_out out">
    <img src="https://i.loli.net/2018/05/03/5aeb0f55411f0.jpg" class="pic" />
</span>
<span class="right_out out">
    <img src="https://i.loli.net/2018/05/03/5aeb0f79a1124.jpg" class="pic" />
</span>
<span class="top_out out">
    <img src="https://i.loli.net/2018/05/03/5aeb0f98a8b66.jpg" class="pic" />
</span>
<span class="bottom_out out">
    <img src="https://i.loli.net/2018/05/03/5aeb0fdd51b7e.jpg" class="pic" />
</span>

用CSS3制作精美的立体盒子装饰(附带制作过程和完整示例)

用CSS3制作精美的立体盒子装饰(附带制作过程和完整示例)

到这里就已经大致完成了！最后还需要让这个正方体旋转起来，也很简单

3.2 自动旋转

在容器.cube中添加对应的css样式，如下

/* 定义名为motion动画，绕X轴和Y轴旋转360° */
@keyframes motion {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
 }
.cube{
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background:greenyellow;
    transform-style: preserve-3d; 
	transform: rotateX(45deg) rotateY(45deg); /* 倾斜角度 */
	animation: motion linear 20s infinite;	  /* 添加名为motion的动画,循环执行动画 */
}

4.完结撒花

最后的最后，把我们前面在容器.wrap和.cube添加的背景颜色去掉(即删掉下面两行)

background: gray;   	/* .wrap */
background: greenyellow;/* .cube */

ok，大功告成。平时并没有存图习惯，图片是临时在P站随便找的，可以自行更换自己喜欢的图片，效果更好（带背景色的图片观感更佳）

5.完整实例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 100px;
            height: 100px;
            margin: 150px auto;
            position: relative;
        }
        .cube {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(45deg) rotateY(45deg);
            animation: motion linear 20s infinite;
            /* 添加名为motion的动画 */
        }
        @keyframes motion {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        /* 内部小正方体 */
        .cube .in {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
        /* 小正方体表面图片 */
        .cube .in_pic {
            width: 100px;
            height: 100px;
        }
        .cube .front_in {
            transform: rotateY(0deg) translateZ(50px);
        }
        .cube .back_in {
            transform: rotateY(180deg) translateZ(50px);
        }
        .cube .left_in {
            transform: rotateY(90deg) translateZ(50px);
        }
        .cube .right_in {
            transform: rotateY(-90deg) translateZ(50px);
        }
        .cube .top_in {
            transform: rotateX(90deg) translateZ(50px);
        }
        .cube .bottom_in {
            transform: rotateX(-90deg) translateZ(50px);
        }

        /* 外部正方体 */
        .cube .out {
            display: block;
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            /* hover过渡时间 */
            transition: all 0.4s;
        }

        /* 外部正方体表面图片 */
        .pic {
            width: 200px;
            height: 200px;
        }
        .cube .front_out {
            transform: rotateY(0deg) translateZ(100px);
        }
        .cube .back_out {
            transform: rotateY(180deg) translateZ(100px);
        }
        .cube .left_out {
            transform: rotateY(90deg) translateZ(100px);
        }
        .cube .right_out {
            transform: rotateY(-90deg) translateZ(100px);
        }
        .cube .top_out {
            transform: rotateX(90deg) translateZ(100px);
        }
        .cube .bottom_out {
            transform: rotateX(-90deg) translateZ(100px);
        }
        /* 鼠标悬浮hover撑开 */
        .cube:hover .front_out {
            transform: rotateY(0deg) translateZ(200px);
        }
        .cube:hover .back_out {
            transform: rotateY(180deg) translateZ(200px);
        }
        .cube:hover .left_out {
            transform: rotateY(90deg) translateZ(200px);
        }
        .cube:hover .right_out {
            transform: rotateY(-90deg) translateZ(200px);
        }
        .cube:hover .top_out {
            transform: rotateX(90deg) translateZ(200px);
        }
        .cube:hover .bottom_out {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="cube">
            <!-- 内部正方体 -->
            <span class="front_in in"><img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/1.png" class="in_pic" /></span>
            <span class="back_in in"><img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/2.png" class="in_pic" /></span>
            <span class="left_in in"><img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/3.png" class="in_pic" /></span>
            <span class="right_in in"><img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/4.png" class="in_pic" /></span>
            <span class="top_in in"><img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/5.png" class="in_pic" /></span>
            <span class="bottom_in in"><img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/6.png" class="in_pic" /></span>
            
            <!-- 外部正方体 -->
            <span class="front_out out"><img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/1.png" class="pic" /></span>
            <span class="back_out out"><img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/2.png" class="pic" /></span>
            <span class="left_out out"><img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/3.png" class="pic" /></span>
            <span class="right_out out"><img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/4.png" class="pic" /></span>
            <span class="top_out out"><img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/5.png" class="pic" /></span>
            <span class="bottom_out out"><img src="https://cdn.jsdelivr.net/gh/LitStronger/aaa@qq.com/post/cssBox/6.png" class="pic" /></span>
        </div>
    </div>
</body>
</html>

参考文章:
https://cloud.tencent.com/developer/article/1584279
查阅资料：
https://www.w3school.com.cn/cssref/pr_animation.asp
https://www.w3school.com.cn/cssref/pr_transform.asp
https://www.w3school.com.cn/cssref/pr_transition.asp

相关标签： css css3 3d

上一篇： css3D立方体旋转动画

下一篇： css3中的3d属性实现一个星空效果

推荐阅读