用HTML+CSS实现旋转的立方体

可乐喽

已于 2022-07-31 13:22:18 修改

阅读量2.3k

点赞数 2

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

于 2022-07-31 13:10:04 首次发布

本文链接：https://blog.csdn.net/m0_52660785/article/details/126084151

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、目标效果

二、预备知识

1.坐标轴

想要实现3D旋转立方体的效果就必须用到了解网页中的坐标轴是怎样的，然后根据坐标轴来旋转图片。与我们平常所见的坐标轴不同，浏览器中的x轴是从左到右的、y轴是从上到下的、z轴是从后到前的。

我们可以通过一些方法来控制图片在坐标轴上面移动。

方法	功能
translateX(x)	沿着 X 轴移动元素。
translateY(y)	沿着 Y 轴移动元素。
translateZ(z)	沿着 Z 轴移动元素。
translate(x,y)	沿着 X 和 Y 轴移动元素。
translate3d(x,y,z)	分别定义沿着三个轴移动的距离

2.旋转动画

实现旋转的立方体我们首先要有一个立方体。制作立方体的过程非常简单，只需要六张图片，两两一组。第一组图片一个沿着最右边，相对y轴旋转-90度；一个沿着最左边，相对y轴旋转90度。第二组图片一个沿着最底边，相对x轴旋转90度；一个沿着最上边，相对x轴旋转-90度。第三组图片一个不动，另一个沿着z轴向后移动一个正方形的边长的距离。这样就一个图片立方体就制作完成了。

img:nth-child(2) {
    /* 设置旋转边 */
    transform-origin: right;
    /* 设置旋转角度 */
    transform: rotateY(-90deg);
}

实现旋转效果需要用到动画和3D效果。如果对动画还不是很了解的朋友可以参考CSS3-动画_可乐喽的博客-CSDN博客这篇文章，这里只说一下怎么实现3D效果。首先是“perspective”属性，个人理解是这个属性定义了我们看这个元素以及其子元素的视角，其值就是视距，也就是我们的眼睛距离成像的平面的距离。其次是"transform-style"这个属性定义了显示形式，由于我们需要3D效果，所以我们把它定义为“preserve-3d”。最后是“transform-origin”属性，该属性定义旋转的中心点，图像的旋转就是围绕着这个点进行的。

三、代码

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>3D立方体</title>
     <style>
         * {
             margin: 0;
             padding: 0;
         }
 
         .box .wrap {
             width: 300px;
             height: 300px;
             margin: 0 auto;
         }
 
         .box {
             margin: 200px auto;
             /* 定义视角 */
             perspective: 1000px;
         }
 
         .wrap {
             position: relative;
             width: 100%;
             height: 100%;
             /* 3d效果显示 */
             transform-style: preserve-3d;
             animation: turn 3s linear infinite;
             /* 定义旋转的位置 */
             transform-origin: center center -150px;
         }
         
         img {
             /* 将图像设置为正方形 */
             width: 300px;
             height: 300px;
             position: absolute;
             top: 0;
             left: 0;
             /* 设置图像的透明度 */
             opacity: .8;
         }
 
         /* 一个图像沿着最右边 相对y轴旋转-90度 */
         img:nth-child(2) {
             transform-origin: right;
             transform: rotateY(-90deg);
         }
 
         /* 一个图像沿着最左边 相对y轴旋转90度 */
         img:nth-child(3) {
             transform-origin: left;
             transform: rotateY(90deg);
         }
 
         /* 一个图像沿着最底边 相对x轴旋转90度 */
         img:nth-child(4) {
             transform-origin: bottom;
             transform: rotateX(90deg);
         }
 
         /* 一个图像沿着最上边 相对x轴旋转-90度 */
         img:nth-child(5) {
             transform-origin: top;
             transform: rotateX(-90deg);
         }
 
         /* 一个图像沿z轴向后移动300px */
         img:last-child {
             transform: translateZ(-300px);
         }
         
         /* 定义旋转动画 */
         @keyframes turn {
             from {
                 transform: rotate3d(1, 1, 0, 0deg);
             }
 
             to {
                 transform: rotate3d(1, 1, 0, 360deg);
             }
         }
     </style>
 </head>
 
 <body>
     <div class="box">
         <div class="wrap">
             <img src="https://img2.woyaogexing.com/2022/07/30/0e093e8294fd0c28!400x400.jpg" alt="">
             <img src="https://img2.woyaogexing.com/2022/07/30/a718129a8cc564d3!400x400.jpg" alt="">
             <img src="https://img2.woyaogexing.com/2022/07/30/cc2796029e811a52!400x400.jpg" alt="">
             <img src="https://img2.woyaogexing.com/2022/07/28/6b892a9d495f666b!400x400.jpg" alt="">
             <img src="https://img2.woyaogexing.com/2022/06/23/c61bcd84592137fa!400x400.jpg" alt="">
             <img src="https://img2.woyaogexing.com/2022/06/23/940c4e898b4b3c9e!400x400.jpg" alt="">
         </div>
     </div>
 </body>
 
 </html>