随即颜色旋转立方体

最新推荐文章于 2020-09-03 09:57:27 发布
最新推荐文章于 2020-09-03 09:57:27 发布
阅读量185 收藏
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TISRNW/article/details/102690648
版权

这是效果图
这是一个手写的小 效果

先写一个立方体之后我们在每个面用table tr td
标签写出每个面的小圆，之后再js中便利每一个小圆，遍历之后每个面随机选出一些来给他颜色。
注意要清除原先的颜色。

下面是代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			html,
			body {
				height: 100%;
				width: 100%;
				overflow: hidden;
				background: -webkit-radial-gradient(center center, 100% 100%, #003371, black);
				/* display: flex; */
				/* align-items: center; */
			}

			.my-centainer {
				height: 320px;
				width: 320px;
				/* display: flex; */
				/* justify-content: center; */
				margin: 150px auto;
				/*background-color: red;*/
			}

			.my-centainer .photo {
				height: 100%;
				width: 100%;
				/* perspective: 1200px; */
				perspective: 1200px;

				perspective-origin: -5px -300px;
			}

			.my-centainer .photo .centainer {
				height: 320px;
				width: 320px;
				/* transform: rotateX(0deg) rotateY(0deg); */
				transform-style: preserve-3d;
				position: relative;
				animation: xuanzhuan 3s linear infinite;
			}

			@keyframes xuanzhuan {
				from {
					transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				}

				to {
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}

			.my-centainer .photo .centainer .img {
				height: 320px;
				width: 320px;
				box-sizing: border-box;
				position: absolute;


				background-color: #003371;
				opacity: .9;

			}

			.my-centainer .photo .centainer .img.img1 {
				transform: translateZ(160px);
				/* background-color: blanchedalmond; */

			}

			.my-centainer .photo .centainer .img.img2 {
				transform: translateZ(-160px);
				/* background-color: rosybrown; */
			}

			.my-centainer .photo .centainer .img.img3 {
				transform: rotateY(90deg) translateZ(160px);
				/* background-color: royalblue; */
			}

			.my-centainer .photo .centainer .img.img4 {
				transform: rotateY(90deg) translateZ(-160px);
				/* background-color: darkmagenta; */
			}

			.my-centainer .photo .centainer .img.img5 {
				transform: rotateX(90deg) translateZ(160px);
				/* background-color: red; */
			}

			.my-centainer .photo .centainer .img.img6 {
				transform: rotateX(90deg) translateZ(-160px);
				/* background-color: hotpink; */
			}

			td {
				height: 40px;
				width: 40px;
				border: 1px solid #3eede7;
				box-sizing: border-box;
				border-top: none;
				border-left: none;
				box-shadow: 0px 0px 4px 2px #3eede7;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div class="my-centainer">
			<div class="photo">
				<div class="centainer">
					<div class="img img1">
						<table cellspacing="0" cellpadding="0">

							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>

						</table>
					</div>
					<div class="img img2">
						<table cellspacing="0" cellpadding="0">

							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>

						</table>
					</div>
					<div class="img img3">
						<table cellspacing="0" cellpadding="0">

							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>

						</table>
					</div>
					<div class="img img4">
						<table cellspacing="0" cellpadding="0">

							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>

						</table>
					</div>
					<div class="img img5">
						<table cellspacing="0" cellpadding="0">

							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>

						</table>
					</div>
					<div class="img img6">
						<table cellspacing="0" cellpadding="0">

							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>
							<tr>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>
								<td></td>

							</tr>

						</table>
					</div>

				</div>
			</div>
		</div>
		<script type="text/javascript">
			window.onload = function() {
				var move = function() {
					var table = document.getElementsByTagName('table')
					// console.log(table)
					for (var i = 0; i < table.length; i++) {
						var tr = table[i].getElementsByTagName('tr')
						for (var j = 0,index2=0; j <tr.length;) {
							
							if (index2 == 5) {
								break
							}
							j = parseInt(Math.random()*8)
							index2++
							var td = tr[j].getElementsByTagName('td')
							for (var k = 0, index1 = 0; k < td.length;) {
								if (index1 == 5) {
									
									break
								}
								
								td[k].style.backgroundColor = ''
								k = parseInt(Math.random()*8)
								td[k].style.backgroundColor = colors();
								
								index1++
								
							}
						}
					}
				}
				var colors = function() {
					var r = parseInt(Math.floor(Math.random() * 255))
					var g = parseInt(Math.floor(Math.random() * 255))
					var b = parseInt(Math.floor(Math.random() * 255))
					var str = 'rgb' + '(' + r + ',' + g + ',' + b + ')'
					return str
				}
				setInterval(move, 100)
				move()
			}
		</script>
	</body>
</html>
雕琢时光纸戆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【CASS精品教程】011：CASS绘图软件入门初级教程超详细资料
「 刘一哥与GIS的故事」
04-16 7832
文章目录第一章 CASS 9.0简介第二章 CASS 9.0快速入门第三章 测制地形图第四章 测制地籍图第五章 土地详查与勘测定界第六章 CASS在数据入库中的应用第七章 CASS 9.0在工程中的应用第八章 数字地图管理第九章 CASS在市政监管中的应用第十章 白纸图数字化第十一章电子平板成图第十二章 CASS 9.0打印指南 第一章 CASS 9.0简介 南方cass9.0是一款能在AutoCAD2000、2002、2004、2005、2006、2007、2008、2010上加载的使用的建筑CAD软件
学到maxscript脚本语言的一些操作
尘墨
07-25 2969
以前学过脚本语言python，感觉这两种语言很像   1 输出语句 for  i  =  i  to  4  do  (print  i  )   2赋值语句 a  =  "JINGRONGJUN" b  =  "meng" 可以相加 a+b   3建立文件 myfile = createfile "e:\\data.txt"   4随机数(1到100之间随机整数) a
html中css3之3d基本知识点 完成一个立方体的并且让其旋转
lanseguhui的博客
06-25 2265
1.开启该盒子的3d视图，让其内部的子级进行3d变化时，可见transform-style: preserve-3d;2.设置观察者距离：设置了观察者和变形盒子之间的距离，盒子在沿z轴变化时，将在设置的距离上按照近大远小的规律变化perspective: 500px;3.设置3d观察者的角度 perspective-origin：center center （中心） perspective-ori...
纹理相关知识整理
puppet_master的专栏
11-13 2502
原文地址：http://www.cnblogs.com/helinsen/archive/2012/08/01/2618539.html 纹理是增强计算机生成的三维图像的真实感的有力工具。Microsoft® Direct3D®支持广泛的纹理特性，并使开发人员可以很方便地使用高级纹理技术。 本节讲述如何使用纹理。 纹理的基本概念纹理坐标纹理过滤纹理资源纹理环绕纹理混合表面
Unity3D实践系列06,球体撞击物体游戏
weixin_34402090的博客
01-08 1798
  本篇实现一个球体在固定区域移动撞击Cube的游戏。   首先有1个Plane当作地面，1个Sphere当作球体，4个Cube当作墙，12个Cube当作被撞击物体，另外还有球体的撞击计算，在撞击的过程适时显示撞击的球体数，12个Cube被撞击后提示游戏结束。   创建项目，创建背景和球   创建一个项目，名称为"MyRollBall",选择项目所在文件，选择"3D"项，点击"Create pr...
3D游戏引擎剖析
wolf96的专栏
02-21 4773
介绍 自Doom游戏时代以来我们已经走了很远。 DOOM不只是一款伟大的游戏，它同时也开创了一种新的游戏编程模式: 游戏 "引擎"。 这种模块化，可伸缩和扩展的设计观念可以让游戏玩家和程序设计者深入到游戏核心，用新的模型，场景和声音创造新的游戏， 或向已有的游戏素材中添加新的东西。大量的新游戏根据已经存在的游戏引擎开发出来，而大多数都以ID公司的Quake引擎为基础， 这些游戏包括Coun
三维重建
James_bobo的博客
09-03 3682
     三维重建技术通过深度数据获取、预处理、点云配准与融合、生成表面等过程，把真实场景刻画成符合计算机逻辑表达的数学模型。这种模型可以对如文物保护、游戏开发、建筑设计、临床医学等研究起到辅助的作用。      三维重建技术的重点在于如何获取目标场景或物体的深度信息。在景物深...
Java3D实现三维显示
老高的博客
09-04 4030
 钟家豪 (judson78@yahoo.com.cn)陈漠 (Maggie_c2008@hotmail.com)2003 年 6 月 Java3D用其自己定义的场景图和观察模式等技术构造了3D的上层结构，实现了在Java平台使用三维技术。本文在原理上着重介绍Java3D特有的两个重要概念：场景图（Scene Graph）、观察模式（View Model）。在接口使用上的介绍分为两部分：实
纹理（讲得比较详细的文章）
buck84的专栏
05-30 3810
真够详细的 http://www.gesoftfactory.com/developer/Textures.htm 纹理是增强计算机生成的三维图像的真实感的有力工具。Microsoft® Direct3D®支持广泛的纹理特性，并使开发人员可以很方便地使用高级纹理技术。 本节讲述如何使用纹理。 纹理的基本概念纹理坐标纹理过滤纹理资源纹理环绕纹理混合表面 以下
旋转立方体旋转立方体旋转立方体旋转立方体
最新发布
03-26
旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体旋转立方体...
双层旋转立方体.rar
08-17
这个项目旨在实现一个视觉上吸引人的展示，其中立方体的内外两层都可以旋转，展示出12张可自定义的图片。 【描述】中提到的“内六外六一共十二张图片”意味着立方体的每一面都有一张图片，总共两个立方体，即内部和...
旋转立方体 展开切换
09-08
10. **光照和材质**：在立方体旋转和展开的过程中，考虑光照和材质的影响可以使效果更加逼真。光照模型和材质属性（如颜色、反射、折射）都是影响最终视觉效果的重要因素。 综上所述，“旋转立方体 展开切换”涵盖...
旋转立方体
12-03
旋转立方体，刚开始学，做的不是很好，也可能有些地方做的不是很好，各位凑合看
MyCGTest_计算机图形学_旋转立方体_
09-29
为了使立方体旋转，我们需要应用矩阵变换，如旋转矩阵。例如，围绕X轴、Y轴或Z轴的旋转可以通过特定的旋转角度（如弧度）和对应的旋转矩阵来实现。 其次，颜色变换通常涉及色彩模型，如RGB（红绿蓝）模型，其中每个...
HTML写一个登录框样式
热门推荐
TISRNW的博客
09-19 1万+
以QQ空间的登陆框为例，原先的代码很复杂，还涉及了其他的知识，对于刚刚接触的人来说想写一点点样式来练练手的话可以看一下。 写好之后是这个样子 下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <styl...
用js做一个简单的计算器
TISRNW的博客
10-29 1757
实现并不困难 1，我们首先把样式写出来 2，写出来之后我们用js获取我们每次点击的数值，将其运算等等并将其填充到我们写的显示屏上。 3，对于清零，取反，取百分数代码中有详细说明。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&g...
轮播图（点击小点点让他跳转到具体某一张）
TISRNW的博客
10-25 1623
轮播图的原理前几篇说过一些 现在加上一些点点击让他轮播 具体就是自己添加一个标签，获取之后知道他是哪一张进行显示就可以了。 下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="t...
js入门 （用wasd来移动一个小色块）
TISRNW的博客
10-23 808
获取你的事件按钮之后，就可以根据键位来改变小色块的位置。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0px; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值