CSS：
@charset "utf-8";
@media screen and (min-width: 320px) {
body {
font-family:'BebasRegular';
text-align:center;
background-color: #d0d2d0;
background-image:url(../Image/Back_pattern.png);
width: 95%;
height: 95%;
margin:auto;
}
div#main {
font-size: 3vw;
}
#content {
margin:auto;
height:100vh;
width:100vw;
}
}
@font-face {
font-family: 'BebasRegular';
src: url('../Fonts/BEBAS___-webfont.eot');
src: url('../Fonts/BEBAS___-webfont.eot?#iefix') format('embedded-opentype'),
url('../Fonts/BEBAS___-webfont.woff') format('woff'),
url('../Fonts/BEBAS___-webfont.ttf') format('truetype'),
url('../Fonts/BEBAS___-webfont.svg#BebasRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@media only screen and (orientation: landscape) {
#item1_placeholder{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 7%;
content: "";
display: block;
padding-bottom: 7%;
}
#AHCube div {
position: absolute;
width: 7vw;
height: 7vw;
border: 1px solid rgba(0,0,0,0.3);
background: rgba(255,255,255,1);
box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
text-align: center;
line-height: 120px;
}
#AHCube .Front {
-webkit-transform: translateZ(3.5vw);
transform: translateZ(3.5vw);
-moz-transform: translateZ(3.5vw);
-o-transform: translateZ(3.5vw);
}
#AHCube .Right {
-webkit-transform: rotateY(90deg) translateZ(3.5vw);
transform: rotateY(90deg) translateZ(3.5vw);
-moz-transform: rotateY(90deg) translateZ(3.5vw);
-o-transform: rotateY(90deg) translateZ(3.5vw);
}
#AHCube .Top {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(3.5vw);
transform: rotateY(90deg) rotateX(90deg) translateZ(3.5vw);
-moz-transform: rotateY(90deg) rotateX(90deg) translateZ(3.5vw);
-o-transform: rotateY(90deg) rotateX(90deg) translateZ(3.5vw);
}
#AHCube .Back {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(3.5vw);
transform: rotateY(180deg) rotateZ(90deg) translateZ(3.5vw);
-moz-transform: rotateY(180deg) rotateZ(90deg) translateZ(3.5vw);
-o-transform: rotateY(180deg) rotateZ(90deg) translateZ(3.5vw);
}
#AHCube .Left {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(3.5vw);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(3.5vw);
-moz-transform: rotateY(-90deg) rotateZ(90deg) translateZ(3.5vw);
-o-transform: rotateY(-90deg) rotateZ(90deg) translateZ(3.5vw);
}
#AHCube .Below {
-webkit-transform: rotateX(-90deg) translateZ(3.5vw);
transform: rotateX(-90deg) translateZ(3.5vw);
-moz-transform: rotateX(-90deg) translateZ(3.5vw);
-o-transform: rotateX(-90deg) translateZ(3.5vw);
background:rgba(3,76,244,1.00);
}
.AH_Ani1 {
-webkit-animation-name: spin1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
-webkit-animation-duration: 5s;
-webkit-animation-fill-mode: forwards;
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 3.5vw 3.5vw 0;
animation-name: spin1;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-duration: 5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
transform-origin: 3.5vw 3.5vw 0;
-moz-animation-name: spin1;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
-moz-animation-duration: 5s;
-moz-animation-fill-mode: forwards;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 3.5vw 3.5vw 0;
-o-animation-name: spin1;
-o-animation-timing-function: ease-in-out;
-o-animation-iteration-count: 1;
-o-animation-duration: 5s;
-o-animation-fill-mode: forwards;
-o-transform-style: preserve-3d;
-o-transform-origin: 3.5vw 3.5vw 0;
}
.ICO_Hold1 {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
filter: drop-shadow(5% 5% 5% #222);
width: 80%;
height: auto;
display:block;
}
@-webkit-keyframes spin1 {
from,to { -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
0% { -webkit-transform:scale(0,0); }
10% { -webkit-transform:scale(1,1); }
28% { -webkit-transform: rotateY(-90deg); }
46% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
64% { -webkit-transform: rotateY(-180deg) rotateZ(90deg); }
82% { -webkit-transform: rotateY(90deg) rotateX(90deg); }
100% { -webkit-transform: rotateX(90deg); }
}
@keyframes spin1 {
from,to { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
0% { transform:scale(0,0); }
10% { transform:scale(1,1); }
28% { transform: rotateY(-90deg); }
46% { transform: rotateY(-90deg) rotateZ(90deg); }
64% { transform: rotateY(-180deg) rotateZ(90deg); }
82% { transform: rotateY(90deg) rotateX(90deg); }
100% { transform: rotateX(90deg); }
}
@-moz-keyframes spin1 {
from,to { -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
0% { -moz-transform:scale(0,0); }
10% { -moz-transform:scale(1,1); }
28% { -moz-transform: rotateY(-90deg); }
46% { -moz-transform: rotateY(-90deg) rotateZ(90deg); }
64% { -moz-transform: rotateY(-180deg) rotateZ(90deg); }
82% { -moz-transform: rotateY(90deg) rotateX(90deg); }
100% { -moz-transform: rotateX(90deg); }
}
@-o-keyframes spin1 {
from,to { -o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
0% { -o-transform:scale(0,0); }
10% { -o-transform:scale(1,1); }
28% { -o-transform: rotateY(-90deg); }
46% { -o-transform: rotateY(-90deg) rotateZ(90deg); }
64% { -o-transform: rotateY(-180deg) rotateZ(90deg); }
82% { -o-transform: rotateY(90deg) rotateX(90deg); }
100% { -o-transform: rotateX(90deg); }
}
}
@media only screen and (orientation: portrait) {
#item1_placeholder{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0%;
content: "";
display: block;
padding-bottom: 0%;
}
#AHCube div {
position: absolute;
width: 0vw;
height: 0vw;
border: 1px solid rgba(0,0,0,0.3);
background: rgba(255,255,255,1);
box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
text-align: center;
line-height: 120px;
}
.ICO_Hold1 {
position: fixed;
top: 0%;
left: 0%;
transform: translate(-50%, -50%);
-webkit-filter: drop-shadow(50% 50% 50% #222 );
filter: drop-shadow(5% 5% 5% #222);
width: 0%;
height: auto;
display:none;
}
}
HTML：
<div id="item1_placeholder" >
<div id="AHCube" class="AH_Ani1">
<div class="Front"><img class="ICO_Hold1" src="Image/1-1.png" /></div>
<div class="Right"><img class="ICO_Hold1" src="Image/1-2.png" /></div>
<div class="Top"><img class="ICO_Hold1" src="Image/1-3.png" /></div>
<div class="Back"><img class="ICO_Hold1" src="Image/1-4.png" /></div>
<div class="Left"><img class="ICO_Hold1" src="Image/1-5.png" /></div>
<div class="Below"><img class="ICO_Hold1" src="Image/1-6.png" /></div>
</div>
</div>
它在Chrome和Mozilla中运行良好，但它不是很好的IE或Microsoft Edge，我没有在便携式设备中检查它 另一个问题是在纵向视图中，立方体的图像背景没有隐藏在纵向视图中。
任何人都可以检查一下并提示我纠正/解决这个问题吗？