Html+Css 3D旋转立方体

最新推荐文章于 2024-05-07 19:47:04 发布
最新推荐文章于 2024-05-07 19:47:04 发布
阅读量3.7k 收藏 11
点赞数 2
分类专栏： Css Html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/caojunzhi96/article/details/89474982
版权
Html 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
Css
2 篇文章 0 订阅
订阅专栏

在上一篇的 Html+Css+Js 3D旋转爱心 中间可插图片的代码基础上稍做修改获得两个大小不一3D旋转立方体，留作记忆，代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #000;
            overflow: hidden;
        }

        .threeD {
            transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
        }

        .content {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 400px;
            height: 400px;
            margin: auto;
            transform-origin: 50% 50% -100px;
            -ms-transform-origin: 50% 50% -200px;
            -webkit-transform-origin: 50% 50% -200px;
            animation: allRot2 20s linear infinite;
            -ms-animation: allRot2 20s linear infinite;
            -webkit-animation: allRot2 20s linear infinite;
            /*perspective: 400px;*/
        }

        .cube {
            position: absolute;
            left: 0;
            right: 0;
            top: 20px;
            bottom: 0;
            margin: auto;
            transform: rotateX(60deg);
            -ms-transform: rotateX(60deg);
            -webkit-transform: rotateX(60deg);
        }

            .cube > div {
                position: absolute;
                width: 100%;
                height: 100%;
            }

        @keyframes allRot {
            0% {
                transform: rotateX(0deg);
            }

            100% {
                transform: rotateX(360deg);
            }
        }

        @keyframes allRot2 {
            0% {
                transform: rotate3d(1,1,0,0deg) rotateX(0deg) rotateY(0deg);
                -ms-transform: rotate3d(1,1,0,0deg) rotateX(0deg) rotateY(0deg);
                -webkit-transform: rotate3d(1,1,0,0deg) rotateX(0deg) rotateY(0deg);
            }

            100% {
                transform: rotate3d(1,1,0,360deg) rotateX(360deg) rotateY(360deg);
                -ms-transform: rotate3d(1,1,0,360deg) rotateX(360deg) rotateY(360deg);
                -webkit-transform: rotate3d(1,1,0,360deg) rotateX(360deg) rotateY(360deg);
            }
        }

        .big {
            width: 200px;
            height: 200px;
        }

            .big > div {
                opacity: 0.7;
                transform-origin: 50% 50% -100px;
                -ms-transform-origin: 50% 50% -100px;
                -webkit-transform-origin: 50% 50% -100px;
            }

            .big :hover > div {
                opacity: 1;
            }

        .small {
            width: 100px;
            height: 100px;
            transform: rotateX(60deg) rotateZ(180deg) translateZ(-50px);
            -ms-transform: rotateX(60deg) rotateZ(180deg) translateZ(-50px);
            -webkit-transform: rotateX(60deg) rotateZ(180deg) translateZ(-50px);
        }

            .small > div {
                transform-origin: 50% 50% -50px;
                -ms-transform-origin: 50% 50% -50px;
                -webkit-transform-origin: 50% 50% -50px;
            }

        .cube > div > img {
            width: 100%;
            height: 100%;
        }
        /*正面*/
        .cube > div:nth-child(1) {
            top: 0px;
            left: 0px;
        }
        /*上面*/
        .cube > div:nth-child(2) {
            transform: rotateX(90deg);
            -ms-transform: rotateX(90deg);
            -webkit-transform: rotateX(90deg);
        }
        /*右面*/
        .cube > div:nth-child(3) {
            transform: rotateY(-90deg);
            -ms-transform: rotateY(-90deg);
            -webkit-transform: rotateY(-90deg);
        }
        /*左面*/
        .cube > div:nth-child(4) {
            transform: rotateY(90deg);
            -ms-transform: rotateY(90deg);
            -webkit-transform: rotateY(90deg);
        }
        /*下面*/
        .cube > div:nth-child(5) {
            transform: rotateX(-90deg);
            -ms-transform: rotateX(-90deg);
            -webkit-transform: rotateX(-90deg);
        }

        /*后面*/
        .cube > div:nth-child(6) {
            transform: rotateY(180deg);
            -ms-transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
        }

        /*正面*/
        .big:hover > div:nth-child(1) {
            transform: translateZ(100px);
        }
        /*上面*/
        .big:hover > div:nth-child(2) {
            transform: rotateX(90deg) translateZ(100px);
            -ms-transform: rotateX(90deg) translateZ(100px);
            -webkit-transform: rotateX(90deg) translateZ(100px);
        }
        /*右面*/
        .big:hover > div:nth-child(3) {
            transform: rotateY(-90deg) translateZ(100px);
            -ms-transform: rotateY(-90deg) translateZ(100px);
            -webkit-transform: rotateY(-90deg) translateZ(100px);
        }
        /*左面*/
        .big:hover > div:nth-child(4) {
            transform: rotateY(90deg)translateZ(100px);
            -ms-transform: rotateY(90deg)translateZ(100px);
            -webkit-transform: rotateY(90deg)translateZ(100px);
        }
        /*下面*/
        .big:hover > div:nth-child(5) {
            transform: rotateX(-90deg)translateZ(100px);
            -ms-transform: rotateX(-90deg)translateZ(100px);
            -webkit-transform: rotateX(-90deg)translateZ(100px);
        }

        /*后面*/
        .big:hover > div:nth-child(6) {
            transform: rotateY(180deg)translateZ(100px);
            -ms-transform: rotateY(180deg)translateZ(100px);
            -webkit-transform: rotateY(180deg)translateZ(100px);
        }
    </style>
</head>
<body>
    <div class="threeD content">
        <div class="threeD cube big">
            <div><img src="Images/1.jpg" alt="" /> </div>
            <div><img src="Images/2.jpg" alt="" /> </div>
            <div><img src="Images/3.jpg" alt="" /> </div>
            <div><img src="Images/4.jpg" alt="" /> </div>
            <div><img src="Images/5.jpg" alt="" /> </div>
            <div><img src="Images/6.jpg" alt="" /> </div>
        </div>
        <div class="threeD cube small">
            <div><img src="Images/1.jpg" alt="" /> </div>
            <div><img src="Images/2.jpg" alt="" /> </div>
            <div><img src="Images/3.jpg" alt="" /> </div>
            <div><img src="Images/4.jpg" alt="" /> </div>
            <div><img src="Images/5.jpg" alt="" /> </div>
            <div><img src="Images/6.jpg" alt="" /> </div>
        </div>
    </div>
</body>
</html>

 

caojunzhi96
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
96经典软件外加无忧启动winall，两个光盘打包成一个exe，用ultraiso打开
08-30
96经典软件外加无忧启动winall，两个光盘打包成一个exe，用ultraiso打开 96经典软件外加无忧启动winall，两个光盘打包成一个exe，用ultraiso打开
html3d正方体(可以旋转互动)
wjh091225的博客
03-21 2509
2d特效 transform:translateX(); x轴平移 transform: translateY(); y轴平移 transform:translateZ(); z轴平移 transform:rotateX(); x轴旋转 transform:rotateY(); ...
使用CSS3实现酷炫的3D旋转视图
2401_84097658的博客
05-07 906
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
HTML5特效~3D立方体旋转
QDY5945的博客
10-06 1577
先欣赏一下该特效的最终效果 本文源码参考自http://www.cnblogs.com/ECJTUACM-873284962/进行一点点优化,下面是对此特效原理上的的剖析. 该特效是基于Css3的一...
穷举例题：蜘蛛、蜻蜓、蝉共有118条腿和20对翅
caojunzhi96的博客
03-16 4411
问题：蜘蛛有8条腿，蜻蜓有6条腿和2对翅，蝉有6条腿和1对翅。三种虫子共18只，共有118条腿和20对翅。问每种虫子各几只？代码：public class W03_16_03穷举例题 { public static final int LEG_SUM = 118;//共有118条腿 public static final int WINGS_SUM = 20;//共有20对翅 ...
2022跨年烟花代码（五）HTML5全屏烟花特效
热门推荐
u013343616的博客
12-30 14万+
HTML5全屏烟花特效 html代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
jQuery+CSS3 3D立方体旋转图标菜单代码
06-05
在本文中，我们将深入探讨如何使用jQuery和CSS3技术创建一个具有3D立方体旋转效果的图标菜单。这种菜单设计可以为网站增加视觉吸引力，并提供交互式的用户体验。 首先，jQuery是一个广泛使用的JavaScript库，它简化...
HTML5+CSS3实例 ：3D立方体旋转
07-31
本实例聚焦于HTML5+CSS3实现的3D立方体旋转效果，这是一个能够吸引用户注意力，提升网站视觉吸引力的炫酷特效。 HTML5是超文本标记语言的第五版，它扩展了原有的HTML4.01，引入了新的元素，如、、、等，使得网页...
HTML+CSS 3D立方体拆解动画
09-20
接下来，我们为立方体的每个面应用适当的3D旋转，以形成正确的相对位置。例如，前面对应的CSS可能是： ```css .front { transform: translateZ(100px); } .back { transform: rotateY(180deg) translateZ(100px); ...
html+css+js 酷炫的旋转立方体
04-28
在本项目中，我们探索了如何使用HTML、CSS和JavaScript技术来创建一个酷炫的动态旋转立方体效果。这个互动的立方体展示了一个强大的前端开发技术的运用，它能够为网页增加引人入胜的视觉体验。以下是实现这一效果的...
jQuery+CSS3 3D立方体旋转图标菜单代码.zip
09-23
《jQuery+CSS3 3D立方体旋转图标菜单代码详解》 在当今的网页开发领域，jQuery和CSS3已经成为不可或缺的工具，它们为开发者提供了丰富的交互性和视觉效果。本篇文章将详细探讨“jQuery+CSS3 3D立方体旋转图标菜单...
用HTML+CSS实现旋转的立方体
m0_52660785的博客
07-31 2302
用HTML+CSS实现旋转的立方体
通过正方体案例来了解HTML5+CSS3+Bootstrap的3D转换、旋转等功能
weixin_59042297的博客
03-25 1222
1.本文讲解的响应式开发技术（HTML5+CSS3+Bootstrap）的变形中的3D转换、旋转等功能的代码，这也是很多教材的一个典型案例，具体功能是实现一个盒子模型的正方体能够以3D的方式进行旋转，同时每个面上会显示对应的方向数字；下面定义了正方体每一个面的样式及名字，这里需要使用，同时把这个声明名称为box。在定义完之后，可以看下运行的结果，目前是将正方体放在了中央，但文字以及3D效果和旋转还没有实现；2.定义box的旋转角度（这个是为刚好的体现正方体每个角度的文字）
html5和css3实现3d正方体旋转
LIGHT03的博客
09-20 1550
3d旋转
web前端：3d立体旋转+源码+详解
成长的嘻嘻哥
12-23 1732
简单，不花哨
纯HTML + css实现一个3D旋转的立方体
tangpinger的博客
05-22 537
3D自动旋转，阴影效果
html+css制作3D旋转正方体特效
m0_63139310的博客
12-28 4644
制作方法： html部分： 连接css 定义大盒子放入想要的图片（此处我直接在放入图片时直接定义了图片的大小，并不规范） css部分： 首先设置盒子的属性，其中transform-style:preserve-3d则是将盒子定义为3d形式，用于制作正方体,而animation:rotateAnimate 10s linear infinite;则是与以下部分相对应，用于创建动画同时设置动画执行一次的时长。 在设置动画之前还要将插入的图片的位置设置成为一个正方体，此时需要对每张图...
HTML+CSS实现3D旋转正方体
qq_42552613的博客
12-16 884
在学习html+css动画时，立体3D效果是必不可少的，正方体也是每个初学者的必学项。
html3d旋转立方体图册
最新发布
06-28
HTML3D（HTML for 3D Graphics）是一个用于在Web上创建三维内容的API，它结合了HTML、CSS和JavaScript，允许开发者在浏览器中渲染复杂的3D场景。旋转立方体图册通常是用来展示3D交互式内容的一种示例，它通常包含一个立方体模型，用户可以通过鼠标或触屏操作进行旋转，以便从不同角度查看。 具体实现步骤可能包括： 1. **创建HTML结构**：使用`<div>`等元素作为容器，创建一个3D空间场景。 2. **添加CSS样式**：为立方体定义3D变换属性，如`transform: translateZ(-50px); perspective: 1000px;`，使立方体具有深度感。 3. **JavaScript交互**：使用WebGL库（比如Three.js或A-Frame）编写JavaScript代码，创建3D立方体模型，设置其位置、旋转和缩放功能，并监听用户的输入事件进行实时旋转。 4. **动画效果**：可以添加平滑的旋转动画，提供更自然的用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值