用简单的html+css做一个魔方扭动特效ฅ(๑ ̀ㅅ ́๑)ฅ

最新推荐文章于 2024-06-16 22:47:32 发布
最新推荐文章于 2024-06-16 22:47:32 发布
阅读量728 收藏 3
点赞数 2
分类专栏： HTML5 文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42459832/article/details/108837789
版权
这篇博客展示了如何使用HTML和CSS3创建一个3D魔方旋转效果。通过定义一系列关键帧动画，实现了魔方各个面的平移和旋转，使得魔方可以进行全方位的转动。虽然CSDN无法上传本地视频展示，但提供了详细的CSS代码供读者参考学习。
摘要由CSDN通过智能技术生成

效果图：CSDN上传不了本地的视频，但这个魔方是可以来回转动+逐层扭动的。
在这里插入图片描述

这个语法图看到下面的话后在翻上来看。
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet"href="css/mofang1.css" />
		<link rel="stylesheet"href="css/animation2.css" />
	</head>
	<body>
		<!--box就当做装这个魔方的盒子，需要用这个盒子来确定魔方的位置，大小，控制3D，
    	以及整个魔方的移动、旋转角度，旋转时长等。
    	这里的HTML只是把魔方里的小格子列出来，如果你要问怎样做一个正方体，
    	仔细看mofang1.css里面的样式，transform中的rotateX（或者是Y,Z）是控制这个平面的
    	旋转方向，而translateX（或者是Y,Z）是控制这个平面移动的距离，这方面的的知识
    	在高中学过，不明白的百度个三维坐标系。
    	还有就是animation，-->
		<div class="bigBox">
			
		<!--第一层-->
		<ul class="u-1-1-1">
				  <!--这里的1-1-1指的是从魔方的最左边，最上边，西北角开始数的，分别对应x,y,z,
        	y向下数是正数，z打个比方就是电脑屏对着你的方向。
        -->
        <!--说白了这个魔方就是个算术题，一次按照顺讯一层一层的把他们写出来-->
      <!--  改的只有位置大小-->
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="front"></li>
		<li class="right"></li>
		<li class="behind"></li>
			</ul>
			
			<ul class="u-2-1-1">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
		
				<ul class="u-3-1-1">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			
				<ul class="u-1-1-2">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			
			
			
					<ul class="u-2-1-2">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			
					<ul class="u-3-1-2">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			
			
				<ul class="u-1-1-3">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			
				<ul class="u-2-1-3">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			
				<ul class="u-3-1-3">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			
	<!--二层-->
			
				<ul class="u-1-2-1">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
					<ul class="u-2-2-1">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			<ul class="u-3-2-1">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			
			
				<ul class="u-1-2-2">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
					<ul class="u-2-2-2">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			<ul class="u-3-2-2">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			
				<ul class="u-1-2-3">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
					<ul class="u-2-2-3">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			<ul class="u-3-2-3">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
			
			
			<!--三层-->
			
			<ul class="u-1-3-1">
		<li class="top"></li>
		<li class="bottom"></li>
		<li class="left"></li>
		<li class="right"></li>
		<li class="front"></li>
		<li class="behind"></li>
			</ul>
					<ul class="u-2-3-
最低0.47元/天 解锁文章
高明懿大可爱
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[ Demo ] HTML/CSS/JS 炫酷魔方
alalasheep的博客
04-06 1451
先来展示一下效果吧～ HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t...
HTML+CSS宇宙魔方特效
baigali1225的博客
12-30 3233
预览图     CSS样式部分：     &lt;style type="text/css"&gt;          .warp{              width: 200px;              height: 200px;              margin: 330px auto;              /*border: 5px solid black;...
使用HTML+CSS实现魔方转体
09-28
基于HTML+CSS动画效果，实现了魔方的转体效果，将魔方的每一次转动都很好的实现，期待大家的评论，期待和大家一起学习
HTML实现魔方
一起coding，一起嗨。
02-04 1657
转载自：用HTML+CSS3写一个会旋转的魔方 - 知乎 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie.
Web前端项目-交互式3D魔方【附源码】
最新发布
qiao_yue的博客
06-16 990
3D魔方游戏是一款基于网页技术的三维魔方游戏，它利用HTML、CSS和JavaScript前端技术来实现3D效果，并在网页上呈现出逼真的魔方操作体验。
【HTML】CSS 旋转的魔方
A-lex的博客
11-13 617
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>旋转的魔方</title> <style> #father{ width: 500px; height: 500px; perspective: 10...
鼠标点击特效 (๑•́ ∀ •̀๑)-crx插件
04-05
语言:English,中文 (简体),日本語 (๑•́ ∀ •̀๑) 好玩的鼠标点击特效 (๑•́ ∀ •̀๑) 好玩的鼠标点击特效** Update 1.2.8 (Nov 2018) **1. 增加随机颜色** Update 1.2 (Nov 2018) **1. 增加设置
Mouse Click Effects 鼠标点击特效 (๑•́ ∀ •̀๑) | 谷歌（Chrome）浏览器插件
03-03
Mouse Click Effects 鼠标点击特效 (๑•́ ∀ •̀๑) 是一款好玩有趣的扩展程序, 他的功能是为鼠标点击添加有趣的特效, 支持自定义弹出内容, 乐趣翻倍 【插件相关文章】 鼠标点击特效 (๑•́ ∀ •̀๑) 为...
元旦倒计时代码 科技风 简约派( •̀ ω •́ )y
12-15
•́ )y ( •̀ ω •́ )y ( •̀ ω •́ )y ( •̀ ω •́ )y ( •̀ ω •́ )y ( •̀ ω •́ )y ( •̀ ω •́ )y ( •̀ ω •́ )y ( •̀ ω •́ )y ( •̀ ω •́ )y ( •̀ ω •́ )y ( •̀ ω •...
跨年烟花代码 - (๑•̀ㅂ•́)و✧
12-29
在本文中，我们将深入探讨如何使用HTML5的`canvas`标签构建一个跨年烟花动画效果。这个项目是一个纯前端实现的实例，它依赖于jQuery库，并结合了CSS文件来增强视觉体验。通过提供的源码，你可以看到一个完整的工作...
HTTP笔记鸭(๑•̀ㅂ•́)و✧
09-30
HTTP协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的WWW文件都必须遵守这个...HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）
html制作3d魔方
03-26
此项目是本人随堂作业，运用html css实现了3d魔方的旋转，有兴趣的可以下载一看！！！
html实现的3D魔方
01-02
html实现的3D魔方，能够实现魔方的基本功能，可以根据需要自定义页面和功能
三阶魔方html
12-10
html,js实现三阶魔方
HTML5 魔方
12-05
HTML5 写的魔方游戏。仅供学习，请勿侵权。
3d魔方游戏h5（HTML5）
03-23
魔方游戏，具体代码，可以运行，具体效果图本博客有
用HTML写魔方
lizhipeng110的博客
03-16 1098
用HTML+CSS实现页面魔方效果
爱敲代码的狼仔
09-10 492
代码如下 css代码： <style> .box{ width:300px; height:300px; margin:200pxauto; position:relative; transform-style:preserve-3d; transform:rotateX(-20deg)rotate...
运用css设计简单3D魔方
LiHang1234567777的博客
07-22 274
本文介绍了css简单魔方样式的基础内容。一、对于3D的理解图二、使用步骤*{margin0;padding0;}html{width100%;height100%;}body{width100%;height100%;displayflex;center;center;}section{width150px;height150px;positionrelative;animation}
使用C++写一个日志类
05-25
下面是一个简单的 C++ 日志类示例： ```cpp #include <iostream> #include <fstream> #include <string> #include <ctime> class Logger { public: Logger(const std::string& filename) : m_file(filename, std::ios::app) {} void log(const std::string& message) { std::time_t now = std::time(nullptr); m_file << std::asctime(std::localtime(&now)) << message << std::endl; } private: std::ofstream m_file; }; int main() { Logger logger("log.txt"); logger.log("This is a log message."); return 0; } ``` 这个示例中，我们定义了一个 `Logger` 类，它接受一个文件名作为构造函数参数。 `log` 函数将一个消息写入文件，该消息包含当前时间和传递给函数的字符串。 运行 `main` 函数将创建一个名为 `log.txt` 的文件并写入一条日志消息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值