首页 前端知识 用HTML CSS实现旋转的立方体

用HTML CSS实现旋转的立方体

2024-02-10 19:02:46 前端知识 前端哥 970 404 我要收藏

目录

一、目标效果

二、预备知识

1.坐标轴

2.旋转动画

三、代码


一、目标效果

 

二、预备知识

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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1676.html
标签
评论
发布的文章

jQuery&layui

2024-02-24 15:02:18

HTML/CSS JavaScript jQuery

2024-02-24 15:02:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!