<!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>
|
