html+Css3炫酷动态魔方代码

最新推荐文章于 2024-04-15 04:47:11 发布
最新推荐文章于 2024-04-15 04:47:11 发布
阅读量1.7k 收藏 15
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45629699/article/details/110838493
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>动态魔方</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style>
			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

			.box {
				width: 300px;
				height: 300px;
				margin: 150px auto;
				position: relative;
				font-size: 50px;
				transform-style: preserve-3d;
				animation: rotate 15s ease infinite;
				animation-direction: alternate;
			}

			.box2 {
				width: 200px;
				height: 200px;
				margin-left: 63px;
				margin-top: 310px;
				position: relative;
				font-size: 25px;
				transform-style: preserve-3d;
				animation: rotate 10s ease infinite;
				animation-direction: alternate-reverse;
			}

			.box>div {
				width: 300px;
				height: 300px;
				position: absolute;
			}

			.box2>div {
				width: 200px;
				height: 200px;
				position: absolute;
			}


			.dv1 li {
				float: left;
				width: 90px;
				height: 90px;
				margin: 5px;
				border-radius: 20px;
				line-height: 90px;
				text-align: center;
				background-color: #aaaa00;
				transform: skewZ(60deg);
			}

			.dv21 li {
				float: left;
				width: 45px;
				height: 45px;
				margin: 5px;
				border-radius: 10px;
				line-height: 45px;
				text-align: center;
				background-color: #ffaaff;
				transform: skewZ(30deg);
			}

			.dv2 li {
				float: left;
				width: 90px;
				height: 90px;
				margin: 5px;
				border-radius: 20px;
				line-height: 90px;
				text-align: center;
				background-color: #aaaa7f;
			}

			.dv22 li {
				float: left;
				width: 45px;
				height: 45px;
				margin: 5px;
				border-radius: 10px;
				line-height: 45px;
				text-align: center;
				background-color: #ffaa7f;
			}

			.dv3 li {
				float: left;
				width: 90px;
				height: 90px;
				margin: 5px;
				border-radius: 20px;
				line-height: 90px;
				text-align: center;
				background-color: #aaaaff;
			}

			.dv23 li {
				float: left;
				width: 45px;
				height: 45px;
				margin: 5px;
				border-radius: 10px;
				line-height: 45px;
				text-align: center;
				background-color: #55aa7f;
			}

			.dv4 li {
				float: left;
				width: 90px;
				height: 90px;
				margin: 5px;
				border-radius: 20px;
				line-height: 90px;
				text-align: center;
				background-color: #55aa7f;
			}

			.dv24 li {
				float: left;
				width: 45px;
				height: 45px;
				margin: 5px;
				border-radius: 10px;
				line-height: 45px;
				text-align: center;
				background-color: #aaaaff;
			}

			.dv5 li {
				float: left;
				width: 90px;
				height: 90px;
				margin: 5px;
				border-radius: 20px;
				line-height: 90px;
				text-align: center;
				background-color: #ffaa7f;
			}

			.dv25 li {
				float: left;
				width: 45px;
				height: 45px;
				margin: 5px;
				border-radius: 10px;
				line-height: 45px;
				text-align: center;
				background-color: #aaaa7f;
			}

			.dv6 li {
				float: left;
				width: 90px;
				height: 90px;
				margin: 5px;
				border-radius: 20px;
				line-height: 90px;
				text-align: center;
				background-color: #ffaaff;
			}

			.dv26 li {
				float: left;
				width: 45px;
				height: 45px;
				margin: 5px;
				border-radius: 10px;
				line-height: 45px;
				text-align: center;
				background-color: #aaaa00;
			}

			.dv1 {
				background-color: transparent;
				transform: rotateY(90deg) translateZ(150px);
			}

			.dv2 {
				background-color: transparent;
				transform: rotateY(-90deg) translateZ(150px);
			}

			.dv3 {
				background-color: transparent;
				transform: rotateX(90deg) translateZ(150px);
			}

			.dv4 {
				background-color: transparent;
				transform: rotateX(-90deg) translateZ(150px);
			}

			.dv5 {
				background-color: transparent;
				transform: translateZ(150px);
			}

			.dv6 {
				background-color: transparent;
				transform: translateZ(-150px);
			}

			.dv21 {
				background-color: transparent;
				transform: rotateY(90deg) translateZ(68px) translateX(30px);
			}

			.dv22 {
				background-color: transparent;
				transform: rotateY(-90deg) translateZ(100px);
			}

			.dv23 {
				background-color: transparent;
				transform: rotateX(90deg) translateZ(100px);
			}

			.dv24 {
				background-color: transparent;
				transform: rotateX(-90deg) translateZ(68px) translateY(30px);
			}

			.dv25 {
				background-color: transparent;
				transform: translateZ(70px);
			}

			.dv26 {
				background-color: transparent;
				transform: translateZ(-100px);
			}

			@keyframes rotate {
				0% {
					transform:rotateY(0deg) rotateX(-90deg);
				}
				25%{
					transform:rotateY(-90deg) rotateX(180deg);
				}
				50%{
					transform:rotateY(180deg) rotateX(-90deg);
				}
				75%{
					transform:rotateY(-270deg) rotateX(540deg);
				}
				100% {
					transform: rotateY(360deg) rotateX(720deg);
				}
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="dv1">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
				</ul>
			</div>
			<div class="box2">
				<div class="dv21">
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
						<li>9</li>
					</ul>
				</div>
			</div>
			<div class="dv2">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
				</ul>
			</div>
			<div class="box2">
				<div class="dv22">
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
						<li>9</li>
					</ul>
				</div>
			</div>

			<div class="dv3">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
				</ul>
			</div>
			<div class="box2">
				<div class="dv23">
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
						<li>9</li>
					</ul>
				</div>
			</div>

			<div class="dv4">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
				</ul>
			</div>
			<div class="box2">
				<div class="dv24">
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
						<li>9</li>
					</ul>
				</div>
			</div>

			<div class="dv5">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
				</ul>
			</div>
			<div class="box2">
				<div class="dv25">
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
						<li>9</li>
					</ul>
				</div>
			</div>

			<div class="dv6">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
					<li>8</li>
					<li>9</li>
				</ul>
			</div>
			<div class="box2">
				<div class="dv26">
					<ul>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>6</li>
						<li>7</li>
						<li>8</li>
						<li>9</li>
					</ul>
				</div>
			</div>
		</div>
	</body>
</html>
南疆晚歌
关注
  • 1
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
自学web前端练手——魔方实现（css3+html+js）
lvshaoshishang的博客
03-23 2151
以css3的平移、旋转、动画为主体构成。 效果如下：（发现不能传小视频就只能粗略截几张图了） 有九宫格飞出去飞回来的效果（一边旋转一边飞），但只设置飞一次，飞回来后只旋转魔方，但我发现有一个面永远转不到他不知道为啥_(:з」∠)_ 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charse...
html+css+js实现的3D魔方小游戏源代码
Python代码大全
03-18 4024
采用html+css+js，双击网页开始游戏，双击后3D魔方进行随机打乱，通过鼠标来操作3D魔方，并能对魔方复位时间进行记录，来挑战自己吧，看看你要多长时间
CSS3D魔法——旋转魔方，2024年最新Web前端开发者该学习哪些东西提高竞争力
最新发布
2201_75604341的博客
04-15 628
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
HTML+CSS实战操作旋转魔方
ztK63LrD的博客
04-30 2882
硬核！HTML+CSS实战操作旋转魔方
写一个html的魔方游戏
weixin_42576186的博客
01-06 218
为了创建一个魔方游戏，你需要使用 HTML、CSS 和 JavaScript。 首先，使用 HTML 来创建一个网页的框架。这包括创建一个包含魔方的 div 元素，以及用于控制游戏的按钮和表单。 接下来，使用 CSS 来设置魔方的样式。这包括设置魔方的大小、颜色和其他样式属性。 最后，使用 JavaScript 来控制游戏的逻辑。这包括监听玩家的输入，并根据玩家的操作来旋转魔方。 以下是一个简单的...
HTML5交互式3D魔方游戏代码
06-24
HTML5交互式3D魔方游戏代码是一款tree.js制作Google Doodle九宫格魔方3d翻转游戏源代码下载。
使用HTML+CSS实现魔方转体
09-28
基于HTML+CSS动画效果，实现了魔方的转体效果，将魔方的每一次转动都很好的实现，期待大家的评论，期待和大家一起学习
抖音超火❤ html+css+js 实现炫酷3D魔方
12-29
【HTML+CSS+JS实现炫酷3D魔方】是一个热门话题，特别是在Web前端开发领域。这个项目结合了三种核心技术，构建了一个引人注目的互动3D效果，它在抖音等社交媒体平台上广受关注。接下来，我们将深入探讨这些技术如何...
CSS3实现3D魔方动画特效特效代码
03-20
**CSS3实现3D魔方动画特效详解** ...通过实践以上步骤和理解相关CSS3特性，你将能够创建出一个炫酷的3D魔方动画特效，提升你的网页设计水平。记住，不断探索和学习新的前端技术，是成为一名出色网页设计师的关键。
HTML5七夕情人节表白网页制作【抖音超火3D炫酷魔方】HTML+CSS+JavaScript
08-10
原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业...
08-最新HTML5+CSS3+JavaScript实用案例大全（2181例）.rar
04-08
3D立体环形百分比进度图表代码3D魔方日历行程表HTML5特效代码3个HTML5网页倒计时代码特效 3个不同风格的Calendar日历日期选择js插件I4个CSS3炫酷文字动画特效 4个jQuery手机移动端幻灯片swipeslider插件]4个很漂亮的...
纯CSS3制作简单的3D动画魔方
11-14
利用纯CSS3制作简单的3D 动画魔方，不到一百行代码就可以实现！
_爱情魔方_html_javascript_CSS3_
10-04
在描述中，“源码基于HTML和CSS3制作，实现了3D魔方动态效果，十分地炫酷，现在分享给大家。”这部分信息告诉我们，该项目的核心是通过编程实现了一个3D魔方的动画效果。HTML作为基础结构，CSS3用于样式设计和实现3D...
WEB--3D立体魔方小游戏 （附源码）
qq_50594742的博客
12-27 1744
HTML + js + three.js 实现3D立体魔方小游戏，代码完整，素材完整
用HTML实现旋转魔方！很有意思
I_am_student的博客
01-08 1722
实现效果：（旋转的截图体现不出来，可以自己下个sublime 复制我给的代码自己试试）。 鼠标放在魔方上效果 实现代码： <!DOCTYPE html> <html> <head> <title>旋转3D正方体</title> <meta charset="utf-8"> <style type="text/css"> img { width: 200px; height: 200px;
用HTML写魔方
lizhipeng110的博客
03-16 1096
html 制作魔方源代码,CSS3 3d环境实现立体 魔方效果代码
weixin_39850697的博客
06-17 975
魔方section{width: 100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspective: 800px;}.box {width:100px;height:100px;position:relative;transform-style:preserve-3d;transition:4S;...
Unity 魔方游戏（附游戏开源代码）
qq_39858654的博客
04-08 5500
unity引擎，用c#写的魔方小游戏，用协程实现的动画效果
html制作魔方动画，每个面九张小图飞起来
執筆冩回憶
03-08 7666
&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

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南疆晚歌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值