小编Aar*_*ion的帖子

我正在使用此处提供的代码:S/O 2-face Animated Cube

我想让这个效果填满网页的整个屏幕,以提供从一个div/iframe到下一个div/iframe的全屏转换.

我尝试使用百分比:

<style>
#experiment {
    -webkit-perspective: 1000;
}
html,body{
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.cube {
    position: relative;
    height: 100%; //<----
    width: 100%; //<----
    -webkit-transition: -webkit-transform .5s linear;
    -webkit-transform-style: preserve-3d;
}
.face {
    position: absolute;
    height: 100%; //<----
    width: 100%; //<----
    color: #fff;
}
.cube .front {
 -webkit-transform: translateZ(50%); //50% should make sense, but doesn't work so I went to Javascript instead
 background-color:gray;
}

.cube .side {
 -webkit-transform: rotateX(-90deg) translateZ(50%);
 background-color:lightgray; …