可旋转魔方

已于 2022-04-27 11:55:47 修改
阅读量208 收藏
点赞数 1
文章标签： 前端
于 2022-04-27 08:51:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_69172270/article/details/124442490
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            perspective: 400px;
        }
        .box {
            position: relative;
            height: 300px;
            width: 300px;
            margin: 150px auto;
            transform-style: preserve-3d;
            transition: all 3s;
        }
        .box:hover {
            transform: rotate3D(1,1,0,360deg);
        }
        .q, .w, .e,.r,.d,.f {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: pink;
        }
        /*前面*/
        .q {
            transform: translateZ(150px);
        }
        /*下面*/
        .w {
            transform:translateY(150px) rotateX(90deg);
        }
        /*左面*/
        .e {
            transform: translateX(-150px)  rotateY(90deg);
        }
        /*右面*/
        .r {
            transform: translateX(150px)  rotateY(90deg);
        }
        /*上面*/
        .d {
            transform: translateY(-150px)  rotateX(90deg);
        }
        /*后面*/
        .f {
            transform: translateZ(-150px);
        }
        ul li {
            float: left;
            list-style: none;
            width: 100px;
            height: 100px;
        }
        .red {
            background-color: red;
        }
        .beige {
            background-color: beige;
        }
        .green {
            background-color: green;
        }
        .orange {
            background-color: orange;
        }
        .blue {
            background-color: blue;
        }
        .purple {
            background-color: purple;
        }
    </style>
</head>
<body>
<div class="box">
<div class="q">
    <ul>
        <li class="red"></li>
        <li class="beige"></li>
        <li class="purple"></li>
        <li class="orange"></li>
        <li class="blue"></li>
        <li class="beige"></li>
        <li class="green"></li>
        <li class="orange"></li>
        <li class="red"></li>
    </ul>
</div>
<div class="w">
    <ul>
        <li class="red"></li>
        <li class="beige"></li>
        <li class="green"></li>
        <li class="orange"></li>
        <li class="blue"></li>
        <li class="beige"></li>
        <li class="green"></li>
        <li class="orange"></li>
        <li class="red"></li>
    </ul>
</div>
<div class="e">
    <ul>
        <li class="red"></li>
        <li class="beige"></li>
        <li class="green"></li>
        <li class="orange"></li>
        <li class="blue"></li>
        <li class="beige"></li>
        <li class="green"></li>
        <li class="orange"></li>
        <li class="red"></li>
    </ul>
</div>
<div class="r">
    <ul>
        <li class="red"></li>
        <li class="beige"></li>
        <li class="green"></li>
        <li class="orange"></li>
        <li class="blue"></li>
        <li class="beige"></li>
        <li class="green"></li>
        <li class="orange"></li>
        <li class="red"></li>
    </ul>
</div>
<div class="d">
    <ul>
        <li class="red"></li>
        <li class="beige"></li>
        <li class="green"></li>
        <li class="orange"></li>
        <li class="blue"></li>
        <li class="beige"></li>
        <li class="green"></li>
        <li class="orange"></li>
        <li class="red"></li>
    </ul>
</div>
<div class="f">
    <ul>
        <li class="red"></li>
        <li class="beige"></li>
        <li class="green"></li>
        <li class="orange"></li>
        <li class="blue"></li>
        <li class="beige"></li>
        <li class="green"></li>
        <li class="orange"></li>
        <li class="red"></li>
    </ul>
</div>
</div>
</body> 
</html>

不会前端的前端猿
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
MATLAB魔方
ArcheL的博客
10-16 3389
魔方程序说明 一、运行界面 运行程序。点击下方按钮，可旋转魔方指定的一层。 二、程序GUI代码 %Author:LeiZhen %Date:2018-10-16 function varargout = mofang6(varargin) % MOFANG6 MATLAB code for mofang6.fig % MOFANG6, by itself, creates ...
3D旋转魔方
12-29
3D旋转魔方，实现按键控制魔方的旋转，含花式旋转和自动复原等功能，VS可直接运行(要配置相关OpenGL库）
CSS3D魔法——旋转魔方
super码力的博客
10-28 1466
css制作旋转魔方
CSS旋转魔方
weixin_45820444的博客
09-02 5502
CSS旋转魔方 我想做一个相册，把儿子的照片放进去，外面是我，里面是他。可是苦逼程序员爱而不得，终日与编辑器为伍，日码万字不能休。 一定要先做下广告，衷心希望大家浏览博客的同时，可以点一下“ 赞助商 ” ，这个机构真的很棒，受疫情影响，原本的大机构为生源所困，我希望同样热爱前端，或者有兴趣向前端发展的朋友，可以了解一下这家机构。我不是学院的招生老师，但大家可以咨询我学院方面的问题，博主不图名利，如果入校学习，我肯定会想办法让机构给你最大的优惠。 不说了，上源码： <!DOCTYPE html>
html魔方转动效果,html5+css3实现旋转魔方的点点滴滴
weixin_39740419的博客
06-03 417
一、知识点1：touch事件的相关内容 touchstart touchmove touchend和其他常用事件一样，touch事件中的event对象中有许多非常有用的方法与属性，而且通过jQuery/Zepto封装之后的事件对象与原生的事件对象又有所不同，因此死记硬背显然不是最好的方式，为了能够正确的使用，我常常使用如下方式来查阅event对象，此处以zepto中使用为例$('.box')....
每天一个JavaScript小特效——会魔法的旋转魔方相册
weixin_62542181的博客
06-13 3495
用html、css、JavaScript做的小特效 实现功能： 点击下方图片可翻转到对应图片实现思路：魔方中用标签包含图片，方便用包裹，后面给ul添加3D模式便可进行翻折
c语言 opengl函数魔方,基于OpenGL的3D旋转魔方实现汇总.docx
weixin_32573931的博客
05-21 563
华中科技大学电子科斗学与技术系课程设计报告(2010-- 2011年度第2学期)名称:题目:院系:班级:学口号:学生姓名：指导教师：设计调数：成绩:日期：软件课程设计基于QpenGL的3D旋转魔方实现PAGEPAGE #1.课程设计介绍1.1目的1.2内容1.3取得的成果2.程序分析2.1程序原理2.2程序流程2.3数据结构132.4重要函数133.程序分析与结果演示163.1成果演示163.2...
Web前端实现3D旋转魔方相册【超详细】
啸啸说的博客
05-25 1493
看完就会的表白神器！
opengl魔方文档_基于OpenGL的3D旋转魔方的实现.doc
weixin_35849182的博客
12-24 561
基于OpenGL的3D旋转魔方的实现华中科技大学电子科学与技术系课程设计报告( 20-- 2012年度第 学期)名 称：软件课程设计题 目：院 系：班 级：学 号：学生姓名：指导教师：设计周数：成 绩：日期： 年 月 日目 录1．课程设计介绍……………………………………………………………… 11.1.内容…………………………………………………...
二阶魔方旋转
小龙的博客
03-24 955
魔方旋转 【问题描述】 魔方可以对它的6个面自由旋转。我们来操作一个2阶魔方（如图1所示）： 为了描述方便，我们为它建立了坐标系。各个面的初始状态如下： x轴正向：绿 x轴反向：蓝 y轴正向：红 y轴反向：橙 z轴正向：白 z轴反向：黄假设我们规定，只能对该魔方进行3种操作。分别标记为： x 表示在x轴正向做顺时针旋转 y 表示在y轴正向做顺时针旋转 z 表示在z轴正向做顺时针旋转xyz 则表示顺...
多媒体 - VC-OpenGL可旋转魔方源码
11-08
多媒体 - VC-OpenGL可旋转魔方源码
可手动旋转魔方-可以鼠标翻转 JS
03-15
这个魔方是一个可以手动操作的魔方。实用性强
可旋转的魔方相册，动态效果
06-24
可旋转的动态相册源码
基于OPENGL的3X3旋转魔方源代码
06-11
自己编写的基于OPENGL的3X3旋转魔方，可实现对旋转速度和方向的控制
vue源码之mustache模板引擎1
qweasl_的博客
05-21 476
模板引擎的一个有点：它是将数据转为视图的最优雅的方法。相信vue的玩家首先想到的是。而还没学vue的朋友，就只能进行dom操作了。通过数组的join方法。以及es6推出的模板字符串。
【Web】CISCN 2024初赛 题解(全)
uuzeray的博客
05-21 1355
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
【详细介绍WebKit的结构】
cz88888888666的博客
05-23 593
WebKit是一个开源的浏览器引擎，主要用于渲染网页内容，它最初由苹果公司为其Safari浏览器开发，目前被多种浏览器和应用程序使用，包括所有基于iOS和macOS的浏览器，WebKit的设计目标是提供快速、精准且流畅的网页浏览体验。
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
最新发布
2301_79969279的博客
05-24 1138
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
旋转魔方阵python
09-23
旋转魔方阵的Python解决方案可以使用旋转矩阵的方法来实现。旋转矩阵可以看作是在矩阵中按照一定的顺序进行移动和替换操作。具体步骤如下： 1. 首先，创建一个空的NxN的矩阵，并初始化元素为1至N*N。 2. 定义四个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值