3D立体方块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.boss{
			width: 400px;
			height: 400px;
			transform-style: preserve-3d;
			position: relative;
			animation:gun 8s linear infinite;
			margin-top: 500px;
			margin-left: 500px;
		}
		 @keyframes    gun{
          0%{
             transform: rotateX(0deg) rotateY(0deg);
          }
            100%{
                transform:rotateX(360deg) rotateY(360deg);
            }
        }
		.div1{
			width: 200px;
			height: 200px;
			border: 1px solid red;
			position: absolute;
			margin-left: 100px;
			margin-top: 100px;
			opacity: 0.5;
		}
		.div1-1{
			background: red;
			transform-origin:left;
			transform:rotateY(90deg)  translateX(0px) translateZ(0px);
		}
		.div1-2{
			background: green;
			transform-origin:right;
			transform:rotateY(-90deg)  translateX(0px) translateZ(0px);
		}
		.div1-3{
			background: black;
			transform-origin:top;
			transform:rotateX(-90deg)  translateX(0px) translateZ(0px);
		}
		.div1-4{
			background: gold;
			transform-origin:bottom;
			transform:rotateX(90deg)  translateX(0px) translateZ(0px);
		}
		.div1-5{
			background: darkcyan;
			/*transform-origin:top;*/
			/*transform:rotateX(-90deg)  translateX(0px) translateZ(0px);*/
		}
		.div1-6{
			background: blueviolet;
			transform: translateZ(-200px);
		}
		.div2-1{
			background: red;
			transform-origin:left;
			transform:rotateY(90deg)  translateX(-100px) translateZ(0px);
		}
		.div2-2{
			background: green;
			transform-origin:right;
			transform:rotateY(-90deg)  translateX(100px) translateZ(0px);
		}
		.div2-3{
			background: black;
			transform-origin:top;
			transform:rotateX(-90deg)  translateY(-100px) translateZ(0px);
		}
		.div2-4{
			background: gold;
			transform-origin:bottom;
			transform:rotateX(90deg)  translateY(100px) translateZ(0px);
		}
		.div2-5{
			background: darkcyan;
			transform: translateZ(100px);
			/*transform-origin:top;*/
			/*transform:rotateX(-90deg)  translateX(0px) translateZ(0px);*/
		}
		.div2-6{
			background: blueviolet;
			transform: translateZ(-300px);
		}
		.div2{
			width: 400px;
			height: 400px;
			border: 1px solid red;
			position: absolute;
			background: darkgray;
			opacity: 0.5;
		}
		.boss:hover .div2-1{
			/*transform-origin:left;*/
			transform:rotateY(90deg)  translateX(-100px) translateZ(-150px);
		}
		.boss:hover .div2-2{
			/*transform-origin:left;*/
			transform:rotateY(-90deg)  translateX(100px) translateZ(-150px);
		}
		.boss:hover .div2-3{
			transform:rotateX(-90deg)  translateY(-100px) translateZ(-150px);
		}
		.boss:hover .div2-4{
			transform:rotateX(90deg)  translateY(100px) translateZ(-150px);
		}
		.boss:hover .div2-5{
			transform: translateZ(250px);
		}
		.boss:hover .div2-6{
			transform: translateZ(-450px);
		}
		.div2{
			transition: all 1s;
		}
	</style>
	<body>
		<div class="boss">
			<div class="div1 div1-1"></div>
			<div class="div1 div1-2"></div>
			<div class="div1 div1-3"></div>
			<div class="div1 div1-4"></div>
			<div class="div1 div1-5"></div>
			<div class="div1 div1-6"></div>
			
			<div class="div2 div2-1"></div>
			<div class="div2 div2-2"></div>
			<div class="div2 div2-3"></div>
			<div class="div2 div2-4"></div>
			<div class="div2 div2-5"></div>
			<div class="div2 div2-6"></div>
		</div>
	</body>
</html>
猜你喜欢
