魔方转转转

最新推荐文章于 2021-06-20 03:45:36 发布
最新推荐文章于 2021-06-20 03:45:36 发布
阅读量389 收藏
点赞数
分类专栏： CSS 文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fanfan_h/article/details/90082556
版权

这次做了个空心的魔方，能够转转转呀

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>魔方</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        body,html{
            position: relative;
            width:100%;
            height:100%;
            overflow: hidden;
        }
        .mf{
            position: relative;
            width:300px;
            height:300px;
            margin:100px auto;
            transform-style: preserve-3d;
            transform: rotatex(80deg)rotatey(80deg);;
            transform-origin:50% ;
            animation: mofang 10s linear infinite;

        }
        @keyframes mofang {
            from{
                transform: rotatex(0deg) rotatey(0deg)rotatez(0deg) ;
            }
            to{
                transform: rotatex(360deg) rotatey(360deg)rotatez(360deg) ;

            }
        }
        .m{
            position: absolute;
            left:0;
            top:0;
            width:300px;
            height:300px;
            box-sizing: border-box;
            border-radius: 20px;

        }
        .m:nth-child(1) {
            border: 5px solid rgba(208, 113, 183, 0.92);
            transform: translatez(150px);
        }
        .m:nth-child(1)>div{
            width:94px;
            height:94px;
            margin:1px;
            float:left;
            border-radius: 10px;
            background: rgba(224, 66, 155, 0.87);
        }
         .m:nth-child(2) {
            border: 5px solid #35d197;
            transform: translatez(-150px);
        }
        .m:nth-child(2)>div{
            width:94px;
            height:94px;
            margin:1px;
            float:left;
            border-radius: 10px;
            background: rgb(127, 231, 129);
        }
        .m:nth-child(3) {
            border: 5px solid #D1CF18;
            transform: translatex(150px)rotatey(90deg);
        }
        .m:nth-child(3)>div{
            width:94px;
            height:94px;
            margin:1px;
            float:left;
            border-radius: 10px;
            background: #F4F871;
        }
        .m:nth-child(4) {
            transform: translatex(-150px) rotatey(90deg);
            border: 5px solid #49b3bf;
        }
        .m:nth-child(4)>div{
            width:94px;
            height:94px;
            margin:1px;
            float:left;
            border-radius:10px;
            background: #7FB6FF;
        }
        .m:nth-child(5) {
            transform: translatey(150px) rotatex(90deg);
            border: 5px solid #eb616a;
        }
        .m:nth-child(5)>div{
            width:94px;
            height:94px;
            margin:1px;
            float:left;
            border-radius:10px;
            background: #FF7F8F;
        }
        .m:nth-child(6) {
            transform: translatey(-150px) rotatex(90deg);
            border: 5px solid #d081db;
        }
        .m:nth-child(6)>div{
            width:94px;
            height:94px;
            margin:1px;
            float:left;
            border-radius: 10px;
            background: rgb(47, 227, 192);
        }

    </style>
</head>
<body>
  <div class="mf">
     <div class="m">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
     </div>
     <div class="m">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
     </div>
     <div class="m">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
     </div>
     <div class="m">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
     </div>
     <div class="m">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
     </div>
     <div class="m">
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
         <div></div>
     </div>

  </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

莓莓儿～
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java实现二阶魔方旋转
南 墙
07-26 1万+
魔方可以对它的6个面自由旋转。 我们来操作一个2阶魔方（如图1所示）： 为了描述方便，我们为它建立了坐标系。 各个面的初始状态如下： x轴正向：绿 x轴反向：蓝 y轴正向：红 y轴反向：橙 z轴正向：白 z轴反向：黄 假设我们规定，只能对该魔方进行3种操作。分别标记为： x 表示在x轴正向做顺时针旋转 y 表示在y轴正向做顺时针旋转 z 表示在z轴正向做顺时针旋转 xyz 则表示顺序执行x,y,...
HTML，简易旋转魔方
m0_74451711的博客
02-28 458
* {margin: 0;padding: 0;.cube {*/*/*/left: 0;top: 0;.shang {.xia {.zuo {*/.you {.qian {.ho {} */0% {100% {
自动解魔方机器人1 [算法篇]
热门推荐
zzzw0的博客
09-29 2万+
魔方机器人其实上个学期就已经做完了，参加了机器人大赛的创意组。 本来想写一个教程，一直没时间整理（其实是懒），这次先把我觉得比较重要的东西写一下，主要是为了记录一下我的制作过程和制作思路，给有同样兴趣的同学提供一些微小的帮助。 最终方案是用普通usb摄像头拍摄魔方的六个面，依次识别每个面，并在MATLAB写的上位机上把识别结果显示出来，确认颜色无误后再拍摄下一个面，识别完6个面后点...
蓝桥杯-魔方旋转
志远的博客
03-18 1030
4. 魔方旋转【问题描述】魔方可以对它的6个面自由旋转。我们来操作一个2阶魔方（如图1所示）：为了描述方便，我们为它建立了坐标系。各个面的初始状态如下：x轴正向：绿x轴反向：蓝y轴正向：红y轴反向：橙z轴正向：白z轴反向：黄假设我们规定，只能对该魔方进行3种操作。分别标记为：x 表示在x轴正向做顺时针旋转y 表示在y轴正向做顺时针旋转z 表示在z轴正向做顺时针旋转xyz 则表示顺序执行x,y,z ...
html魔方转动效果,简单说 用CSS做一个魔方旋转的效果
weixin_42129412的博客
06-03 586
说明魔方大家应该是不会陌生的，这次我们来一起用CSS实现一个魔方旋转的特效，先来看看效果图！ 解释我们要做这样的效果，重点在于怎么把6张图片，摆放成魔方的样子，而把它们摆放成魔方的样子，重点在于用好CSS的transform，这是非常重要的，好的，我们先拼出一个魔方的样子。效果图 代码(代码比较长，朋友们可以直接粘贴复制到电脑看效果)/*最外层容器样式*/.wrap {width: 200px;h...
小白的魔方转转转
qq_46358654的博客
03-05 90
今天我来说说怎么让一个正方体转起来，首先要提炼出立方体里面重要的关键点。 第一步，在建一个盒子将盒子position:fixed;位置固定。形成trabsform-style;preserv-3d;的3D空间。那在这里的animation动画的特点是不需要事件进行触发，调用关键帧即可。它的常用写法顺序是：animation关键帧的名称 动画运动的时间 linear（匀速） 动画延迟的时间。 ...
蓝桥杯-魔方旋转问题
qq_51866806的博客
02-04 2074
魔方可以对它的6个面自由旋转。 我们来操作一个2阶魔方（如下 所示）： 为了描述方便，我们为它建立了坐标系。 各个面的初始状态如下： x轴正向：绿 x轴反向：蓝 y轴正向：红 y轴反向：橙 z轴正向：白 z轴反向：黄 假设我们规定，只能对该魔方进行3种操作。分别标记为： x 表示在x轴正向做顺时针旋转 y 表示在y轴正向做顺时针旋转 z 表示在z轴正向做顺时针旋转 xyz 则表示顺序执行x,y,z 3个操作。 输入描述： 输入一个串，表示操作序列。 例如： 样例输入： x 输出描述： 输出距离我们最近的那
html5 3d 魔方旋转,【HTML5】3D模型--百行代码实现旋转立体魔方
weixin_28937075的博客
06-20 385
最近研究魔方的玩法，就突然想用HMTL5写一个魔方的模型，由于魔方是一个3D的立方体，这次就试着用HTML5写了一个简单的3D模型。下面是测试链接和预览画面。http://www.doczj.com/doc/7051a7d8b4daa58da1114a6f.html/demo/Rubik/index.html制作流程首先你需要下载html5开源库件lufylegend-1.4.0http://ww...
蓝桥杯之二阶魔方旋转
sword_anyone的博客
05-14 719
/* 二阶魔方旋转 魔方可以对它的6个面自由旋转。 我们来操作一个2阶魔方（如图1所示）： 为了描述方便，我们为它建立了坐标系。 各个面的初始状态如下： x轴正向：绿 x轴反向：蓝 y轴正向：红 y轴反向：橙 z轴正向：白 z轴反向：黄 假设我们规定，只能对该魔方进行3种操作。分别标记为： x 表示在x轴正向做顺时针旋转 y 表示在y轴
纯css3 3D魔方翻转动画特效
09-08
【纯CSS3 3D魔方翻转动画特效】是一种利用现代浏览器支持的CSS3特性实现的视觉效果，它能够创建一个立方体结构，并通过变换属性实现各面的动态翻转，为用户带来立体感十足的交互体验。这种技术在网页设计、游戏界面...
HTML5 3D魔方旋转拼图代码
06-24
在这个游戏中，每个面的方块会被绘制到Canvas上，并通过JavaScript进行旋转操作，模拟真实的魔方旋转体验。 为了实现3D效果，这个代码可能使用了WebGL，它是HTML5的一个扩展，提供了原生的3D图形渲染能力。WebGL...
HTML5 3D魔方旋转拼图小游戏代码
06-11
在这个游戏中，Canvas可能被用来绘制3D魔方的各个面，通过JavaScript来控制其旋转和拼接。 2. **WebGL**: 为了实现3D效果，项目可能利用了HTML5的WebGL API，这是一个JavaScript接口，用于在浏览器中进行硬件加速的...
樱花雨3d魔方旋转相册
09-17
"樱花雨3D魔方旋转相册"是一个利用三维效果展示照片的互动应用。这个项目的核心在于通过HTML5、CSS3以及JavaScript等技术实现3D魔方的动态旋转和图片展示，为用户带来视觉上的独特体验。下面我们将深入探讨这个项目...
3D旋转魔方
12-29
《3D旋转魔方：深度探索与实现》 在计算机图形学的世界里，3D旋转魔方是一个引人入胜的项目，它不仅展示了空间旋转的逻辑，还涉及到图形渲染和用户交互等核心技术。本篇将深入探讨3D旋转魔方的实现原理，包括其设计...
3D动画
不想写代码的一天
05-08 8877
3D 转换方法： rotateX(angle) 定义沿 X 轴的 3D 旋转。 rotateY(angle) 定义沿 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿 Z 轴的 3D 旋转。 语法 transform-style:preserve-3d； 转换属性 属性 描述 transform 向元素应用 2D 或 3D 转换。 transform-origin ...
CSS3边框，背景，渐变.........
不想写代码的一天
05-06 2388
一：css3的边框 border-radius：创建圆角 处理兼容性： -webkit-border-radius: 10px; /谷歌/ -moz-border-radius: 10px; /火绒/ -ms-border-radius: 10px; /IE/ .b{ width: 200px; height...
CSS网页设计》》
不想写代码的一天
04-30 2310
这是跟着老师做的一个小案例，小小的有了一点成就感，下次努力 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css 网页布局</title> <link rel="stylesheet" href="ind...
css3动画——2d动画，过渡动画
不想写代码的一天
05-07 995
css3的动画 分类： 2d 动画 ，3d 动画， 2d转3d，过渡动画和帧动画 《一》2d转换:transfrom 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。 属性 描述 translate() 平移（沿x,y,z轴方向平移 px） rotate() 旋转（沿x,y,z轴方向平移 deg） scale() 放大 skew (变形 deg) trans...
html旋转动态魔方相册
最新发布
06-19
HTML旋转动态魔方相册通常是指使用HTML、CSS和JavaScript技术制作的一种交互式的图片展示效果，模拟真实的魔方转动，用户可以通过点击或拖动来浏览图片库。这种设计常常用于网站的图片轮播或者个性化展示中，提供了一种动态且有趣的用户体验。 下面是创建一个简单动态魔方相册的大致步骤： 1. HTML结构：设置一个包含图片的容器，比如一个div，并用CSS将其样式设置为魔方的样式，包括面的大小、颜色和旋转角度等。 ```html <div class="magic-cube"> <img src="image1.jpg" alt="..."> <!-- 更多图片 --> </div> ``` 2. CSS样式：定义魔方的各个面、旋转角度、动画效果等。可以利用CSS3的transform属性来实现旋转。 ```css .magic-cube { perspective: 1000px; } .face { position: absolute; /* ...其他样式... */ } .face img { width: 100%; height: 100%; transition: transform 0.5s; } ``` 3. JavaScript或jQuery：编写脚本控制图片的旋转和切换。这可能涉及到检测用户的交互，更新图片的旋转角度，以及切换到下一张或上一张图片。 ```javascript const cube = document.querySelector('.magic-cube'); let currentAngle = 0; cube.addEventListener('click', () => { currentAngle += 90; cube.style.transform = `rotateY(${currentAngle}deg)`; }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值