HTML 用过渡跟动画制作一个简易的旋转魔方

最新推荐文章于 2024-05-14 22:45:25 发布
最新推荐文章于 2024-05-14 22:45:25 发布
阅读量248 收藏 3
点赞数 2
文章标签： html servlet 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71439860/article/details/125940220
版权

示例代码： 

<!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>

        * {

            margin: 0;

            padding: 0;

        }

       

        html {

            width: 100%;

            height: 100%;

        }

       

        body {

            width: 100%;

            height: 100%;

            display: flex;

            justify-content: center;

            align-items: center;

       

最低0.47元/天 解锁文章
事业有程
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3D魔法——旋转魔方
m0_67619362的博客
05-05 691
3D旋转：rotate3d(x,y,z,deg) 透视：perspective 3D呈现：transfrom-style 三维坐标系： 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 X轴：水平向右（注意：X往右边是正值，往左边是负值） Y轴：垂直向下（注意：Y往下面是正值，往上面是负值） Z轴：垂直屏幕（注意：往外面是正值，往里面是负值） 我们看到的电脑屏幕的左上角等同于坐标中心原点，屏幕上边沿是x的正轴，屏幕左边沿是y的正轴。 [](()二、魔方图片 ==..
HTML+CSS实战操作旋转魔方
ztK63LrD的博客
04-30 2870
硬核！HTML+CSS实战操作旋转魔方
2024年最新HTML+CSS实战操作旋转魔方(3)，最新2024年Web前端大厂面试经验
最新发布
2401_84619986的博客
05-14 381
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。但是，Flex布局就可以避免这种情况：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。以 Vue 为例，我整理了如下的面试题。
纯CSS3做3D动画魔方
小白的编码屋
11-14 1949
之前本来就做过一次，忘了记录了。最近在做抽奖程序的时候看到那个界面就又想再做一次，于是作为小白的掌柜就再次做了一个很简单的3D动画魔方。主要用到的知识点是 相对定位(position: relative)与绝对定位(position: absolute) 浮动(float: left) transform-style： preserve-3d 动画(animation)的设置 旋转(rotate...
HTML实现简单的动画效果(盒子过渡，扑克旋转)
热门推荐
冷色调的夏天的博客
08-22 2万+
HTML实现简单的动画效果(盒子过渡，扑克旋转) // 实现一个简单的鼠标点击div触发过渡效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title>过渡效果</title> <style> *{ margin:0px; padding:0px;}...
写一个html的魔方游戏
weixin_42576186的博客
01-06 216
为了创建一个魔方游戏，你需要使用 HTML、CSS 和 JavaScript。 首先，使用 HTML 来创建一个网页的框架。这包括创建一个包含魔方的 div 元素，以及用于控制游戏的按钮和表单。 接下来，使用 CSS 来设置魔方的样式。这包括设置魔方的大小、颜色和其他样式属性。 最后，使用 JavaScript 来控制游戏的逻辑。这包括监听玩家的输入，并根据玩家的操作来旋转魔方。 以下是一个简单的...
HTML5 3D魔方旋转拼图小游戏代码
06-11
一款很有意思的HTML5 3D魔方旋转拼图小游戏代码，支持键盘上下左右方向键与鼠标进行操作。
HTML5 3D魔方旋转拼图代码
06-24
HTML5 3D魔方旋转拼图代码是一款支持键盘上下左右方向键旋转拼图小游戏代码。
HTML5绘制3D魔方旋转动画特效代码
03-20
HTML5绘制3D魔方旋转动画，纯CSS3绘制。
纯HTML5实现3D魔方动画源码
10-30
一款基于HTML5和CSS3实现的魔方立方体旋转动画，立方体每个面颜色不同，可以用鼠标转动魔方，观察每个面。进入的时候带非常酷的魔方转动展示动画，还可以自由转动每个魔方块，宛如在手上操作一般，操作性强，有需要...
【HTML5】3D模型--百行代码实现旋转立体魔方实例
09-27
本文将深入探讨如何使用HTML5来创建一个旋转的立体魔方，只需大约一百行代码。这种实现方式不仅展示了HTML5在3D图形处理方面的潜力，还为学习3D编程提供了一个简洁的实例。 首先，我们需要了解HTML5中的Canvas元素...
CSS3 3D方块弹跳动画特效
06-24
CSS3 3D方块弹跳动画特效是一款基于css3属性制作3D立体的方块弹跳，两个方块依次有序的弹跳，无限循环动画特效。
旋转的魔方
12-22
魔方旋转flash制作 使用as3.0做的 拿去
animation的八大属性及HTML基础动画效果——平移、旋转、缩放、倾斜、过渡
weixin_43183219的博客
01-09 1万+
animation的八个基础属性、关键帧详细介绍，平移、旋转、缩放、倾斜、过渡的解释及应用
仅使用HTML+CSS制作一个动态简版魔方
lhhllh.的博客
10-13 674
仅使用HTML+CSS制作一个动态简版魔方. 1.软件使用到HBuilder X . 2.使用到CSS3动画. …实现效果如下: … 其代码如下： 魔方 <style type="text/css"> * { padding: 0; margin: 0; } html,body { width: 100%; height: 100%; } body { perspective: 1000px; ba
html制作魔方动画，每个面九张小图飞起来
執筆冩回憶
03-08 7655
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text/css"&gt; *{ padding: 0; margin: 0; } .c
css3.0完成3d方块设计
cooker_666的博客
11-20 399
作用原理 利用css3.0的新特性 transfrom下的 translateX() rotate()被设置景深完成3d效果。设置景深就是设置了一个视锥的效果，类似望远。并且translateX 和 position：absolute可以叠加。先把设置为transition：absolute。让所有的方块面堆在一起。然后用transform做一些平移(translate),旋转(rotate).等...
html旋转3d魔方制作方法,JavaScript实现的3D旋转魔方动画效果实例代码
weixin_42120997的博客
06-16 676
JS1K是JavaScript编程竞赛——参加竞赛的规则很简单，脚本必须小于1K，竞赛网站开始也只是为了娱乐，却意外地收到了很多优秀的作品。这是2016年JS1k上传的作品，用几十行代码实现的一个3D旋转魔方：代码如下：function z(t, e) {return t? e? t.appendChild(e) : "width:"+t+"px;height:"+t+"px;position:a...
css 实现3D立方体效果
王海虎的博客
12-18 386
前两天需要用到一个3D立方体的效果，知道c3可以写但一直都没试过，然后自己写了一下效果还不错，想着跟大家分享一下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content=&qu
html3d旋转魔方正方体代码
05-26
以下是一个简单的HTML和CSS 3D变换代码来实现3x3x3魔方正方体的旋转： ```html <div class="cube"> <div class="side front"> <div class="face"></div> <div class="face"></div> <div class="face"></div> </div> <div class="side back"> <div class="face"></div> <div class="face"></div> <div class="face"></div> </div> <div class="side left"> <div class="face"></div> <div class="face"></div> <div class="face"></div> </div> <div class="side right"> <div class="face"></div> <div class="face"></div> <div class="face"></div> </div> <div class="side top"> <div class="face"></div> <div class="face"></div> <div class="face"></div> </div> <div class="side bottom"> <div class="face"></div> <div class="face"></div> <div class="face"></div> </div> </div> ``` ```css .cube { width: 300px; height: 300px; position: relative; transform-style: preserve-3d; transform: rotateX(45deg) rotateY(45deg); } .side { position: absolute; width: 100px; height: 100px; background-color: transparent; border: 1px solid #000; } .front { transform: translateZ(150px); } .back { transform: rotateY(180deg) translateZ(150px); } .left { transform: rotateY(-90deg) translateZ(150px); } .right { transform: rotateY(90deg) translateZ(150px); } .top { transform: rotateX(90deg) translateZ(150px); } .bottom { transform: rotateX(-90deg) translateZ(150px); } .face { width: 100%; height: 100%; position: absolute; } .front .face:nth-child(1) { background-color: #ff0000; } .front .face:nth-child(2) { background-color: #fff; transform: rotateY(90deg) translateZ(100px); } .front .face:nth-child(3) { background-color: #0000ff; transform: rotateY(-90deg) translateZ(100px); } .back .face:nth-child(1) { background-color: #ff6600; transform: rotateY(180deg); } .back .face:nth-child(2) { background-color: #fff; transform: rotateY(-90deg) translateZ(100px); } .back .face:nth-child(3) { background-color: #00ff00; transform: rotateY(90deg) translateZ(100px); } .left .face:nth-child(1) { background-color: #ffff00; transform: rotateY(-90deg); } .left .face:nth-child(2) { background-color: #fff; transform: rotateX(-90deg) translateZ(100px); } .left .face:nth-child(3) { background-color: #ff00ff; transform: rotateX(90deg) translateZ(100px); } .right .face:nth-child(1) { background-color: #00ffff; transform: rotateY(90deg); } .right .face:nth-child(2) { background-color: #fff; transform: rotateX(90deg) translateZ(100px); } .right .face:nth-child(3) { background-color: #9900ff; transform: rotateX(-90deg) translateZ(100px); } .top .face:nth-child(1) { background-color: #cccccc; transform: rotateX(-90deg); } .top .face:nth-child(2) { background-color: #fff; transform: rotateY(180deg) translateZ(100px); } .top .face:nth-child(3) { background-color: #333; transform: rotateY(-90deg) translateZ(100px); } .bottom .face:nth-child(1) { background-color: #999; transform: rotateX(90deg); } .bottom .face:nth-child(2) { background-color: #fff; transform: translateZ(100px); } .bottom .face:nth-child(3) { background-color: #666; transform: rotateY(90deg) translateZ(100px); } ``` 在上面的代码中，我们使用了 `transform-style: preserve-3d` 属性来启用3D变换，使用 `transform: rotateX(45deg) rotateY(45deg)` 属性来旋转正方体。每个面使用 `transform: translateZ(150px)` 属性来放置到正方体的表面，并使用 `rotateX/Y/Z` 来确定它们的位置。每个面上还包含三个小面，使用不同的背景色来模拟魔方的颜色。通过旋转正方体来实现3x3x3魔方的旋转。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值