【前端】3D效果，立体方形，里外两个

最新推荐文章于 2023-03-19 11:50:15 发布

墨羽染斜阳

最新推荐文章于 2023-03-19 11:50:15 发布

阅读量504

点赞数

分类专栏：前端文章标签： css3 html5 前端

本文链接：https://blog.csdn.net/MOYU96/article/details/106264647

版权

本文介绍如何使用HTML5和CSS3创建一个3D效果，展示了一个大的立体方形内含一个小的立体方形的场景。通过提供的代码，读者可以理解并实现这种视觉效果。

摘要由CSDN通过智能技术生成

3D效果，两个正方体，大的里面包含一个小的看代码。

效果图如下：

一.html5代码

<div class="wrap">
    <div class="cube">
        <div class="front">正面</div>
        <div class="back">背面</div>
        <div class="left">左面</div>
        <div class="right">右面</div>
        <div class="top">上面</div>
        <div class="bottom">下面</div>
        <i class="i-front">1</i>
        <i class="i-back">2</i>
        <i class="i-left">3</i>
        <i class=