用html做立方体，并旋转

最新推荐文章于 2025-04-10 14:51:34 发布
最新推荐文章于 2025-04-10 14:51:34 发布
阅读量3.4k 收藏 39
点赞数 70
文章标签： html css3 css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/2401_82944012/article/details/140224084
版权

用html做立方体，并旋转

前言

刚开始学HTML时以为只能做网页，可是，在这里插入图片描述
HTML彻底颠覆了我的认知。

分析

经我一波操作，搭出来一个正方体。
首先，要完成我们这个项目有三个重要的地方，分别是：
观察层：视角
3D体：开启HTML3d模式
3D面：旋转
从观察层开始，视角距离我们要用perspactive来实现近大远小。这是HTML坐标系
在这里插入图片描述
注意它的旋转方向。
3d层，3d打开方式。transform-style: preserve-3d;语句。
旋转，涉及到动画，等会儿再讲。

开肝

构建3d体。
这样做：创建6个button，把他们放在一起，开启3d，制作三维效果，最后调整位置

<!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>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #fff;
            background: rgba(255, 255, 255,0.75);
            color: #fff;
            font-size: 100px;
            line-height: 200px;
            text-align: center;
            position: absolute;
            transition: 2s;
        }
        body{
            perspective: 800px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            height: 100vh;
        }
        .box:nth-of-type(1){transform: rotateY(90deg) translateZ(100px);}
        .box:nth-of-type(2){transform: rotateY(-90deg) translateZ(100px);}
        .box:nth-of-type(3){transform: rotateX(90deg) translateZ(100px);}
        .box:nth-of-type(4){transform: rotateX(-90deg) translateZ(100px);}
        .box:nth-of-type(5){transform: rotateY(0deg) translateZ(100px);}
        .box:nth-of-type(6){transform: rotateY(180deg) translateZ(100px);}
        .boxs{
            position: absolute;
            /* transform: rotateX(45deg) rotateY(45deg); */
            transform-style: preserve-3d;
            width: 200px;
            height: 200px;
            animation: go 3s infinite linear;
            animation-play-state: running;
        }
    </style>
</head>
<body>
    <div class="boxs">
        <div class="box first">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
有可能看不太清，我改了一下。

<!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>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #fff;
            background: rgba(255, 255, 255,0.75);
            color: #fff;
            font-size: 100px;
            line-height: 200px;
            text-align: center;
            position: absolute;
            transition: 2s;
        }
        body{
            perspective: 800px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            height: 100vh;
        }
        .box:nth-of-type(1){transform: rotateY(90deg) translateZ(100px);}
        .box:nth-of-type(2){transform: rotateY(-90deg) translateZ(100px);}
        .box:nth-of-type(3){transform: rotateX(90deg) translateZ(100px);}
        .box:nth-of-type(4){transform: rotateX(-90deg) translateZ(100px);}
        .box:nth-of-type(5){transform: rotateY(0deg) translateZ(100px);}
        .box:nth-of-type(6){transform: rotateY(180deg) translateZ(100px);}
        .boxs{
            position: absolute;
            transform: rotateX(45deg) rotateY(45deg);
            transform-style: preserve-3d;
            width: 200px;
            height: 200px;
            animation: go 3s infinite linear;
            animation-play-state: running;
        }
    </style>
</head>
<body>
    <div class="boxs">
        <div class="box first">1</div>
        <div class="box">2</div>
        <div class="box">3</div>
        <div class="box">4</div>
        <div class="box">5</div>
        <div class="box">6</div>
    </div>
</body>
</html>

效果：
在这里插入图片描述
很不错。
接下来就实现旋转了，动画效果，要用到

@keyframes go{
            0%{}
            100%{}
        }

只要可以计算，就可以放进0%和100%后的大括号里，刚开始，我们要把它设为正面，也就是rotateX和rotateY为0deg,deg就是角度，然后，再100%时我们可以将它的rotateX和rotateY设为720deg。
代码长这样：

@keyframes go{
            0%{transform: rotateX(0deg) rotateY(0deg);}
            100%{transform: rotateX(720deg) rotateY(360deg);}
        }

最终代码

我添加了一点特殊效果：

<!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>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #fff;
            background: rgba(255, 255, 255,0.75);
            color: #fff;
            font-size: 100px;
            line-height: 200px;
            text-align: center;
            position: absolute;
            transition: 2s;
        }
        body{
            perspective: 800px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            height: 100vh;
        }
        .boxs,.boxs2{
            position: absolute;
            transform: rotateX(45deg) rotateY(45deg);
            transform-style: preserve-3d;
            width: 200px;
            height: 200px;
            animation: go 3s infinite linear;
            animation-play-state: running;
        }
        .boxs:hover{
            animation-play-state: paused;
        }
        .box:nth-of-type(2){transform: rotateY(-90deg) translateZ(100px);}
        .box:nth-of-type(3){transform: rotateX(90deg) translateZ(100px);}
        .box:nth-of-type(4){transform: rotateX(-90deg) translateZ(100px);}
        .box:nth-of-type(5){transform: rotateY(0deg) translateZ(100px);}
        .box:nth-of-type(6){transform: rotateY(180deg) translateZ(100px);}
        .boxs2>.box:nth-of-type(1){transform: rotateY(90deg) translateZ(25px);}
        .boxs2>.box:nth-of-type(2){transform: rotateY(-90deg) translateZ(25px);}
        .boxs2>.box:nth-of-type(3){transform: rotateX(90deg) translateZ(25px);}
        .boxs2>.box:nth-of-type(4){transform: rotateX(-90deg) translateZ(25px);}
        .boxs2>.box:nth-of-type(5){transform: rotateY(0deg) translateZ(25px);}
        .boxs2>.box:nth-of-type(6){transform: rotateY(180deg) translateZ(25px);}
        .boxs2>.box{
            width: 50px;
            height: 50px;
            font-size: 36px;
            line-height: 50px;
            background: rgba(140, 228, 8, 0.25);
        }
        .boxs2{
            width: 50px;
            height: 50px;
        }
        .first{
            transform-origin: 0%;
            transform: translateZ(100px) translateX(200px) rotateY(90deg);
        }
        .boxs:hover .first{
            transform: translateZ(100px) translateX(200px) rotateY(0deg);
        }
        @keyframes go{
            0%{transform: rotateX(0deg) rotateY(0deg);}
            100%{transform: rotateX(720deg) rotateY(360deg);}
        }
    </style>
</head>
<body>
    <div class="boxs2">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="boxs">
        <div class="box first"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

如果将鼠标放在正方体上，会有一个面开门，会看见一个淡绿色的正方体在里面转。

最后

敬请期待！

纯HTML + css实现一个3D旋转的立方体
tangpinger的博客
05-22 708
3D自动旋转，阴影效果
用HTML+CSS制作一个立方体
wym123_的博客
06-12 681
用HTML+CSS制作一个立方体
html53D建模
weixin_42512139的博客
08-16 364
如何实现HTML 3D建模：一名新手的指南 3D建模在网页开发中越来越受欢迎，尤其是利用HTML与JavaScript的结合来创建互动体验。接下来，我将向你详细讲解实现HTML 3D建模的流程，帮助你从零开始掌握这一技能。 整体流程 以下是实现HTML 3D建模的主要步骤： 步骤 描述 步骤1 选择合适的3D...
html5 3D旋转立方体
07-19
使用html5+css3+jquery组合，一个可以通过按键控制立方体旋转的demo，具有3D效果。
用 HTML、CSS 实现 3D 立方体动画效果
最新发布
2401_88691693的博客
04-10 551
在这篇博客中，我们将详细介绍一段通过 HTML 和 CSS 代码创建的 3D 立方体动画的实现细节。这个 3D 立方体不仅能够在页面中居中显示，还能不断地进行 360 度旋转，每个面还可以展示不同的图片。
旋转立方体的实现
weixin_48492914的博客
11-16 151
<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>旋转立方体</title> <style> ...
HTML5旋转立方体
weixin_30724853的博客
03-19 317
http://42.121.104.41/templets/default/test1.htm 须要源代码的留言邮箱哈~ 转载于:https://www.cnblogs.com/mqxnongmin/p/10561300.html...
html5 3d旋转立方体
06-08
可以切换至正方体的任意一面。今天我们再来分享一款绚丽的HTML5 3D立方体旋转动画，这款立方体的色彩看上去非常艳丽，旋转起来的动画效果也十分流畅。是一款很不错的HTML5 3D动画效果。
html5正方体旋转
09-11
html5正方体旋转
jquery实现360度立方体3D旋转效果
06-10
9. **响应式设计**：考虑到不同设备的屏幕尺寸，立方体旋转效果应该具有响应式。这可能涉及到调整图片大小、旋转角度或动画速度，以适应不同分辨率和屏幕方向。 通过以上步骤，我们可以构建一个由36张图片组成的3D...
双层旋转立方体.rar
08-17
【标题】"双层旋转立方体.rar"是一个包含HTML和CSS代码的压缩文件，用于创建一个具有动画效果的双层旋转立方体照片墙。这个项目旨在实现一个视觉上吸引人的展示，其中立方体的内外两层都可以旋转，展示出12张可...
HTML5 3D立方体旋转动画特效代码
03-20
本主题聚焦于HTML5中的3D立方体旋转动画特效，这是一个利用HTML5的Canvas API和CSS3来实现的炫酷视觉效果。 首先，我们要理解HTML5 Canvas。Canvas是HTML5的一个核心元素，允许开发者在网页上绘制2D和3D图形。通过...
HTML5 3D立方体旋转动画
08-23
之前我们已经分享一款HTML5 3D正方体旋转动画，可以切换至...今天我们再来分享一款绚丽的HTML5 3D立方体旋转动画，这款立方体的色彩看上去非常艳丽，旋转起来的动画效果也十分流畅。是一款很不错的HTML5 3D动画效果。
3D立方体图片旋转特效
07-29
结合`transform`属性，可以实现立方体旋转的平滑动画。 7. **HTML结构**：实现3D立方体图片旋转特效需要合理的HTML结构。通常，每个立方体面都是一个独立的HTML元素，通过CSS定位并应用相应的3D变换。 8. **图片...
HTML5特效~3D立方体旋转
diji2219的博客
10-07 863
先欣赏一下该特效的最终效果 本文源码参考自http://www.cnblogs.com/ECJTUACM-873284962/进行一点点优化,下面是对此特效原理上的的剖析. 该特效是基于Css3的一些新特性拼接而成.主要用到了hover,transform和@keyframe...
Html设计小技巧之可旋转立方体效果
weixin_66448747的博客
02-25 617
Html设计小技巧之可旋转立方体效果
Html+Css 3D旋转立方体
caojunzhi96的博客
04-23 3932
在上一篇的Html+Css+Js 3D旋转爱心 中间可插图片的代码基础上稍做修改获得两个大小不一3D旋转立方体，留作记忆，代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" conten...
HTML5——3D立方体旋转动画
liuyingshudian的博客
04-01 1187
效果图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于CSS3的3D立方体旋转动画又一版本</title> <style > *{box-sizing: border-box; } html{...
HTML+CSS 实现一个立方体
chanyuhong's
07-19 3297
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>立方体</title> </head> <style> *{ padding: 0;margin: 0; } #cube{ width: 300px;height: 300px; font-size: 80px; text-align: center;.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值