3D之随机变色12旋转体

最新推荐文章于 2023-12-04 22:55:10 发布

置顶我就是咸鱼

最新推荐文章于 2023-12-04 22:55:10 发布

阅读量186

点赞数

分类专栏： js

本文链接：https://blog.youkuaiyun.com/weixin_44808327/article/details/111072806

版权

js 专栏收录该内容

18 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
		perspective:1000px;
	}
		.box{
			width: 200px;
			height: 400px;
			border: 3px solid red;
			position: absolute;
			top:0;
			bottom: 0;
			left: 0;
			right: 0;
			margin:100px auto;
			animation: round 5s linear infinite;
			transform-style:preserve-3d;/*声明3D*/
			transform: rotateX(-15deg)rotateY(-15deg);/*旋转z轴*/
		}
		.box div{
			width: 200px;
			height: 400px;
			position: absolute;
			top:0;
			left:0;
		}
		@keyframes round{
            100%{
                transform:  rotateX(720deg);
            }
        }
	</style>
</head>
<body>
	<div class="box" id="box"></div>
</body>
<script type="text/javascript">
    // document文本
	var _box = document.getElementById('box');
	var _index=''
    /*第一种方法
	/*循环div*/
	for (var i = 0; i < 12; i++) {
		_index +="<div style='transform:rotateY("+30*i+"deg) translateZ(400px);background:"+RandRGB(0.5)+"'></div>" 
		};	
     	
		/*innerHTML输入文本*/
		_box.innerHTML = _index;
	
	function  RandRGB(a){
		var arr = [] ;
		/*向下取整[0,1)*11/*0到10*/
		/*[0,1)*11+10/*10到20*/
		for (var j = 0; j < 3; j++) {
			/*push把值加入进去*/
			arr.push(Math.floor(Math.random()*256));
			}
		arr.push(a);
		return "rgb("+arr+")"
		}
		/*第二种方法*/
		/*
		for (var i = 0; i < 12; i++) {
		_index +="<div style='transform:rotateY("+30*i+"deg) translateZ(400px);background:#ff0000'></div>";
		};
		/*innerHTML输入文本*/
		/*
		_box.innerHTML = _index;

		function RandRGB2(){
			var arr = []
			var color = 0;
		for (var n = 0; n <3 ; n++) {
			color = Math.floor(Math.random()*256).toString(16)
			if (color.length ==1 {
				color = '0'+color
				}
				arr.push(color);
			}
			return '#' +arr.join('');
		}
		*/
</script>
</html>

在这里插入图片描述