HTML+CSS:旋转的正方体相册

X-SL

已于 2023-06-23 23:54:38 修改

阅读量343

点赞数

分类专栏：炫酷特效文章标签： css css3 html

于 2023-06-15 19:27:58 首次发布

本文链接：https://blog.csdn.net/qq_40924992/article/details/131234244

版权

本文展示了如何使用HTML和CSS3创建一个旋转的正方体相册，详细解析了难点，包括理解浏览器坐标轴、通过旋转和位移组合形成正方体以及运用animation让相册动起来。同时，文章提到了代码中存在一些错误，鼓励读者找出并修复这些错误。

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

文章目录

先上效果：

HTNL+CSS：旋转的正方体相册

重点难点

1.浏览器表示的坐标轴是怎样的？
提示：可以想象天花板角落。向下的方向表示Y轴。

2.在第一个难点的基础上，我们就需要知道怎样通过旋转，位置将六个平面拼成正方体。
提示：沿X轴旋转并上下位移可以得到正方体的上下面，沿Y轴旋转并位移我们就得到了左右面，前后面只需要位移就可以了。

3.使用animation属性是我们得到的正方体动起来。

HTML代码：

<body>
    <!-- 第一步：创建画布 -->
    <div class="wrap">
        <!-- 第二步：创建一个盒子，容纳正方体的六个面 -->
      <div class="box">
        <!-- 第三步：使用包含图片的div表示正方体的六个面 -->
           <div class="left"><img src="imgs/6-14-1.jpg" alt=""></div>
           <div class="right"><img src="imgs/6-14-2.jpeg"<