3D魔方自动旋转拼凑（加强版）

最新推荐文章于 2024-10-10 20:59:20 发布
最新推荐文章于 2024-10-10 20:59:20 发布
阅读量102 收藏
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69070454/article/details/124412824
版权
这是一个使用HTML和CSS3实现的3D魔方旋转拼凑效果加强版。通过CSS3的transform属性和动画，实现了魔方在鼠标悬停时进行复杂旋转，包括多个面的独立动画效果。该实例展示了前端技术在创建交互式3D图形方面的应用。
摘要由CSDN通过智能技术生成

<!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>Document</title>

    <style>

        body {

            width: 1520px;

            height: 600px;

            background-image: linear-gradient(#29f9f0 0%, #000 80%);

        }

        .box {

            position: relative;

            width: 100px;

            height: 100px;

            margin: 150px auto;

            transition: all 200s;

            transform-style: preserve-3d;

            transform: rotateX(15deg) rotateY(-15deg);

        }

        .box:hover {

            transform: rotateX(10000deg) rotateY(-1000deg) rotateZ(10000deg) scale3d(0, 0, 0);

        }

        .box div {

            position: absolute;

            width: 100%;

            height: 100%;

            top: 0;

            left: 0;

        }

        .box div:nth-child(1) {

            background: rgba(225, 0, 0, 0.9);

            transform: rotateX(90deg) translateZ(50px);

        }

        .box div:nth-child(2) {

            background: rgba(225, 210, 0, 0.9);

            transform: translateZ(-50px);

        }

        .box div:nth-child(3) {

            background: rgba(56, 225, 0, 0.9);

            transform: translateZ(50px);

        }

        .box div:nth-child(4) {

            background: rgba(255, 192, 203, 0.89);

            transform: rotateX(-90deg) translateZ(50px);

        }

        .box div:nth-child(5) {

            background: rgba(41, 0, 225, 0.9);

            transform: rotateY(90deg) translateZ(50px);

        }

        .box div:nth-child(6) {

            background: rgba(225, 0, 180, 0.9);

            transform: rotateY(-90deg) translateZ(50px);

        }

        .a1 {

            transform: translateX(0px) translateY(-110px);

            animation: a11 1s 1S linear forwards, a12 1s 2s linear forwards, a13 1s 7s linear forwards, a14 1s 8s linear forwards, a15 2s 4s linear forwards

        }

        .a2 {

            transform: translateX(110px) translateY(-100px);

            animation: a21 1s linear forwards, a22 1s 1s linear forwards, a23 1s 8s linear forwards, a24 1s 9s linear forwards, a25 2s 4s linear forwards

        }

        .a3 {

            transform: translateX(110px) translateY(10px);

            animation: a31 1s linear forwards, a32 1s 1s linear forwards, a33 1s 2s linear forwards, a34 1s 3s linear forwards, a35 1s 6s linear forwards, a36 1s 7s linear forwards, a37 1s 8s linear forwards, a38 1s 9s linear forwards, a39 2s 4s linear forwards

        }

     

最低0.47元/天 解锁文章
辛泽西
关注
专栏目录
实体3D的自动旋转动画
love_yinzi的专栏
11-21 587
以前觉得三维体的自动旋转是一件很神奇的事后来才知道，只是两句代码。。。 首先要在资源文件里创建一个动画  然后调用就OK了 private void Window_Loaded(object sender, RoutedEventArgs e) {            this.rotation.BeginAnimation(AxisAngleRotation3D
css 3D 自动旋转效果
YKenan的博客
08-22 706
css 3D 自动旋转效果1. 代码和效果 1. 代码和效果 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>照片</title> <style> html, body { margin: 0;...
南邮图形学第一次课堂测试 - 3D魔方转动
njuptACMcxk的博客
10-20 850
main: #include <iostream> //GLEW #define GLEW_STATIC #include <glew.h> #include "Camera.h" //GLFW #include <glfw3.h> //Shader #include "Shader.h" // SOIL2 //Linux 用的是 \, 但是 / 都可以用 #include "SOIL2/SOIL2.h" #include "SOIL2/stb_image
可以无限循环，自动旋转，停靠的3D旋转布局控件
钢铁烈阳--非花非雾
04-18 3144
分享一个看着不错的效果，看效果图： 效果如上图： 代码实现步骤： 1、首先确定这是一个自定义View，再有就是是一个ViewGroup，那么必须继承Layout（线性相对都可以） 2、需要收拾操作，要使用GestureDetector（手势检测） 3、很明显选择是动画效果，使用ValueAnimation 4、计算旋转的角度，执行动画效果 代码里边都添加了注释，就不细说了。
Python之画一个3d的魔方可以自由转动
PlutoZuo的博客
12-07 823
Python之画一个3d的魔方可以自由转动
樱花雨3d魔方旋转相册
09-17
"樱花雨3D魔方旋转相册"是一个利用三维效果展示照片的互动应用。这个项目的核心在于通过HTML5、CSS3以及JavaScript等技术实现3D魔方的动态旋转和图片展示，为用户带来视觉上的独特体验。下面我们将深入探讨这个项目...
HTML5 3D魔方旋转拼图代码
06-24
在本案例中，我们讨论的是一个基于HTML5实现的3D魔方旋转拼图小游戏。 首先，3D魔方旋转拼图是利用HTML5的Canvas元素来构建的。Canvas是一个基于矢量图形的画布，允许开发者通过JavaScript进行实时绘图，创造出各种...
HTML5 3D魔方旋转拼图小游戏代码
06-11
在这个游戏中，Canvas可能被用来绘制3D魔方的各个面，通过JavaScript来控制其旋转和拼接。 2. **WebGL**: 为了实现3D效果，项目可能利用了HTML5的WebGL API，这是一个JavaScript接口，用于在浏览器中进行硬件加速的...
3D魔方网页版HTML5源码
03-20
同时，它增强了离线存储能力，提供了Canvas画布和SVG矢量图，以及Audio和Video多媒体元素，这些都是实现3D魔方网页版的基础。 3D魔方的实现主要依赖于HTML5的Canvas API。Canvas是一个二维绘图上下文，通过...
三阶魔方的演示-用Python实现-附源码
iceran1977的博客
12-08 2894
三阶魔方的演示-用Python实现 相信很多人都玩过魔方，最常见的就是三阶魔方。初级的玩家在玩的时候不可避免的遇到一个问题就是玩着玩着， 还原不了了。如果那教程来照着还原，一步一步下来也很费劲。我开发这个程序的目的是为了让初学者很方便的 学习玩魔方的方法。魔方是有很多公式的，但是如果一味的记公式，一方面公式非常多也很难记住，另一方面失 去了思考的乐趣。 要演示好一个三阶魔方也并不是很简单的。首先，魔方的旋转是多个块相关的，并且不同的旋转操作，关联的块 也不同。另外，魔方的颜色信息也需要考虑。
手把手教你做出数据可视化项目（六）动态3D柱状图及其自动旋转
热门推荐
diviner_s的博客
06-12 1万+
数据可视化前言：https://blog.csdn.net/diviner_s/article/details/115933789 项目最终效果图： 此篇博客为自己学习pink老师的课后完成的项目的总结与记录，仅供交流参考。版权所有，转载请标注原作者！ 使用echarts技术做的可视图，此外其项目包含 的技术有html、css、js、jquerry、ajax、websocket、koa等。 文章目录动态三维柱状图三维柱状图数据存储柱状图配置tooltip配置xAxis3D配置yAxis3D配置zAxi.
002-实现Unity3d中触摸屏幕控制物体的旋转和缩放 代码实现
Taoger的博客
05-03 7768
1、直接帮到物体的身上就可以了 using UnityEngine; using System.Collections; using System.IO; public class hehe : MonoBehaviour {     private Touch oldTouch1;  //上次触摸点1(手指1)       private Touch oldTouch2;
3D自动旋转图（HTML5）
下午茶的博客
09-28 3129
代码如下： html> html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; } li{ list-style:
Android 3D立体旋转效果实现
xkyh941的博客
03-20 1万+
说明：之前在网上到处搜寻类似的旋转效果 但搜到的结果都不是十分满意 原因不多追述（如果有人找到过相关 比较好的效果 可以发一下连接 一起共同进步）一 效果展示 ：如非您所需要的效果 也希望能给些微帮助具体操作以及实现 效果 请看项目例子二 使用方式此空间继承与FrameLayout子空间直接添加如同framelayout 相同 如要如图效果 唯一要求子空间必须位于父控件中心且宽高等大小 为...
Matlab 三维视图的自动旋转
C_S_D_N_USER的专栏
11-08 1万+
figure plot3(...); xlabel('X轴'); ylabel('Y轴'); zlabel('Z轴：sol'); title('延时：0.25，初值全为一'); grid on %打开网格 for i=1:2:360 %view(a,b):a是角度，b是仰视角 view(i,20); pause(0.06); end
实现简单的三D立方体自动旋转
肥学的博客
06-27 1048
display:inline-block，block，inline元素的区别:行内标签：不能设置宽度 高度 padding margin，标签不能自动伸展。可以通过display灵活的将标签在行内和行间随意转换；display：inline;转换成行内标签display：block;转换成块级标签。 js 点击直接资料领取 如果你在学习python或者Java哪怕是C遇到问题都可以来给我留言，因为在学习初期新手总会走很多弯路，这个时候如果没有有个人来帮一把的话很容易就放弃了。身边很多这样的例子许多人学着学
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 254
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
web扩展
最新发布
x737510的博客
10-10 508
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
HTML5百行代码实现3D旋转魔方：基础与构建
在本文中，作者探讨了如何利用HTML5技术来创建一个可旋转的3D立体魔方模型。这个过程主要涉及以下几个关键知识点： 1. HTML5和3D模型基础： HTML5提供了一些3D图形处理能力，通过开源库如Lufylegend-1.4.0，开发者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值