<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
		<title>3D</title>
		<style>
			/*æœ€å¤–å±‚å®¹å™¨æ ·å¼*/
			.wrap {
				/* width: 60px; */
				height: 100vh;
				position: relative;
				background-color: #e3e8cc;
				overflow: hidden;
			}
		
			/*åŒ…è£¹æ‰€æœ‰å®¹å™¨æ ·å¼*/
			/*è®¾ç½®transform-style: preserve-3dï¼Œè®©å…¶åå…ƒç´ åœ¨3Dç©ºé—´å‘ˆçŽ°*/
			.cube {
				position: absolute;
				/* width: 200px;
				height: 200px; */
				
				left: 50%;
				top: 50%;
				background-color: #6d9329;
				transform-style: preserve-3d;
				transform: rotateX(-0deg) rotateY(-0deg);
				animation: rotate linear 10s infinite;
				/* rotate: åŠ¨ç”»åç§°  linearï¼šå‡é€Ÿè¿åŠ¨ 20sï¼š20ç§’å®Œæˆä¸€æ¬¡ infiniteï¼šä¸€ç›´å¾ªçŽ¯*/
				
				/* perspective: 200px; */
			}
			.cube:hover {
				/* è®¾ç½®åŠ¨ç”»æ˜¯å¦æš‚åœ*/
				animation-play-state: paused;
			}
		
			@-webkit-keyframes rotate {
				0% {
					transform: rotateX(0deg) rotateY(0deg);
				}
		
				100% {
					transform: rotateX(-360deg) rotateY(-360deg);
				}
			}
		
			/*å®šä¹‰å°æ£æ–¹ä½“æ ·å¼*/
			.cube .in_pic {
				position: absolute;
				left: 50%;
				top: 50%;
				
				width: 200px;
				height: 200px;
				opacity: 0.8;
				transition: all .4s;
			}
			.cube .in_pic:hover {
				cursor: pointer;
				opacity: 1;
			}
		
			.cube .in_front {
				transform: translate(-50%,-50%) rotateY(0deg) translateZ(100px);
			}
		
			.cube .in_back {
				transform: translate(-50%,-50%) rotateY(180deg) translateZ(100px);
			}
		
			.cube .in_left {
				transform: translate(-50%,-50%) rotateY(-90deg) translateZ(100px);
			}
		
			.cube .in_right {
				transform: translate(-50%,-50%) rotateY(90deg) translateZ(100px);
			}
		
			.cube .in_top {
				transform: translate(-50%,-50%) rotateX(90deg) translateZ(100px);
			}
		
			.cube .in_bottom {
				transform: translate(-50%,-50%) rotateX(-90deg) translateZ(100px);
			}
			
			.iframe_1 {
				transform-origin: left top;
				transform:  scale(13%, 13%);
			}
		</style>
	</head>
	<body style="margin: 0px;">
		<div align="center">
			<!-- å¤–å±‚æœ€å¤§å®¹å™¨ -->
			<div class="wrap">
				<!--åŒ…è£¹æ‰€æœ‰å…ƒç´ çš„å®¹å™¨-->
				<div class="cube">
					Q
					<!--å°æ£æ–¹ä½“ -->
					<div style="background-color: #02ccae;" class="in_pic in_front">
						Q1
						<iframe class="iframe_1" style="width: 100vw; height: 100vh;" frameborder="0" src="../../login.html"></iframe>
					</div>
					<div style="background-color: #756fcc;" class="in_pic in_back">
						Q2
						<iframe class="iframe_1" style="width: 100vw; height: 100vh;" frameborder="0" src="../../login.html"></iframe>
					</div>
					<div style="background-color: #7dc2ec;" class="in_pic in_left">
						Q3
						<iframe class="iframe_1" style="width: 100vw; height: 100vh;" frameborder="0" src="../../login.html"></iframe>
					</div>
					<div style="background-color: #70cc60;" class="in_pic in_right">
						Q4
						<iframe class="iframe_1" style="width: 100vw; height: 100vh;" frameborder="0" src="../../login.html"></iframe>
					</div>
					<div style="background-color: #dd4f35;" class="in_pic in_top">
						Q5
						<!-- <iframe class="iframe_1" style="width: 100vw; height: 100vh;" frameborder="0" src="../../login.html"></iframe> -->
					</div>
					<div style="background-color: #eaea2c;border-radius: 50%;" class="in_pic in_bottom">
						Q6
						<!-- <iframe class="iframe_1" style="width: 100vw; height: 100vh;" frameborder="0" src="../../login.html"></iframe> -->
					</div>
				</div>
			</div>
		</div>
	</body>
</html>