HTML立方体分解 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width:500px;
			height: 400px;
			border: 1px solid red;
			margin:50px auto;
			position: relative;
			transform-style: preserve-3d;
			/*transform: rotateX(45deg) rotateY(45deg);*/
			animation: move 5s linear infinite;
		}
		#box .aa{
			width:200px;
			height:200px;
			text-align: center;
			line-height: 200px;
			font-size: 50px;
			position: absolute;
			left:150px;
			top:100px;
			transition: all 2s;
			/*border: 4px solid #FF0000;*/
			
		}
		
		#box1{
			width:100px;
			height: 100px;
			/*margin:-250px -200px;*/
			position: relative;
			/*transform-style: preserve-3d;*/
			/*transform: rotateX(45deg) rotateY(45deg);*/
		/*	animation: move 5s linear infinite;*/
		}
				#box1 .bb{
			width:100px;
			height:100px;
			text-align: center;
			line-height: 100px;
			font-size: 25px;
			position: absolute;
			left:50px;
			top:50px;
			transition: all 2s;
			/*border: 4px solid #FF0000;*/
			
		}
		
		@keyframes move{
			0%{
				transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
			}
			100%{
				transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
			}
		}
		#box .aa:nth-child(1){
			transform: rotateY(90deg) translateZ(100px);
			
		}
		#box .aa:nth-child(2){
			transform: rotateY(180deg) translateZ(100px);
			
		}
		#box .aa:nth-child(3){
			transform: rotateY(270deg) translateZ(100px);
			
		}
		#box .aa:nth-child(4){
			transform: rotateY(360deg) translateZ(100px);
			
		}
		#box .aa:nth-child(5){
			transform: rotateX(90deg) translateZ(100px);
			
		}
		#box .aa:nth-child(6){
			transform: rotateX(-90deg) translateZ(100px);
			
		}
		#box .aa:nth-child(7){
			
			background: none;
		}
		#box:hover .aa:nth-child(1){
			transform: rotateY(90deg) translateZ(150px);
			
		}
		#box:hover .aa:nth-child(2){
			transform: rotateY(180deg) translateZ(150px);
			
		}
		#box:hover .aa:nth-child(3){
			transform: rotateY(270deg) translateZ(150px);
			
		}
		#box:hover .aa:nth-child(4){
			transform: rotateY(360deg) translateZ(150px);
			
		}
		#box:hover .aa:nth-child(5){
			transform: rotateX(90deg) translateZ(150px);
			
		}
		#box:hover .aa:nth-child(6){
			transform: rotateX(-90deg) translateZ(150px);
		}
		
		
		
		#box1 .bb:nth-child(1){
			transform: rotateY(90deg) translateZ(50px);
			
		}
		#box1 .bb:nth-child(2){
			transform: rotateY(180deg) translateZ(50px);
			
		}
		#box1 .bb:nth-child(3){
			transform: rotateY(270deg) translateZ(50px);
			
		}
		#box1 .bb:nth-child(4){
			transform: rotateY(360deg) translateZ(50px);
			
		}
		#box1 .bb:nth-child(5){
			transform: rotateX(90deg) translateZ(50px);
			
		}
		#box1 .bb:nth-child(6){
			transform: rotateX(-90deg) translateZ(50px);
			
		}
		
		
	</style>
	<body>
		<div id="box">
			<div class="aa a1"><img src="mn1.jpg" style="width: 200px;height: 200px;"/></div>
			<div class="aa a2"><img src="mn2.jpg" style="width: 200px;height: 200px;"/></div>
			<div class="aa a3"><img src="mn3.jpg" style="width: 200px;height: 200px;"/></div>
			<div class="aa a4"><img src="mn4.jpg" style="width: 200px;height: 200px;"/></div>
			<div class="aa a5"><img src="mn5.jpg" style="width: 200px;height: 200px;"/></div>
			<div class="aa a6"><img src="mn6.jpg" style="width: 200px;height: 200px;"/></div>
			<div class="aa a7" id="box1">
					<div class="bb b1">1</div>
					<div class="bb b2">2</div>
					<div class="bb b3">3</div>
					<div class="bb b4">4</div>
					<div class="bb b5">5</div>
					<div class="bb b6">6</div>
			</div>
		</div>
		
	</body>
	<script type="text/javascript">
		var oDiv=box.getElementsByTagName("div");
		setInterval(function(){
			for(var i=7;i<oDiv.length;i++){
			var R=Math.round(Math.random()*255),
				G=Math.round(Math.random()*255),
				B=Math.round(Math.random()*255);
				oDiv[i].style.cssText="background: rgba("+R+","+G+","+B+",1);"
				
				
				
				
//		if(i<4){
//			oDiv[i].style.cssText+="transform:rotateY("+i*90+"deg) translateZ(100px);"
//		}else if(i==4){
//			oDiv[i].style.cssText+="transform:rotateX(90deg) translateZ(100px);"
//		}else{
//			oDiv[i].style.cssText+="transform:rotateY(-90deg) translateZ(100px);"
//		}
		}
		},1000)
		
	</script>
</html>

posted @ 2019-10-16 10:55  JackieDYH  阅读(2)  评论(0)  编辑  收藏  举报  来源