【发布时间】：2015-08-04 00:01:48
【问题描述】：
我正在使用此处提供的代码：S/O 2-face Animated Cube
我想让这个效果填满网页的整个屏幕，以提供从一个 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;
}
.cube:hover{
-webkit-transform:rotateX(90deg);
}
</style>
<div id="experiment">
<div id="cube" class="cube" align="center">
<div id="front" class="face front">
front face
</div>
<div id="side" class="face side">
side face
</div>
</div>
</div>
我还尝试使用 Javascript 设置大小：
<script>
var w = window.innerWidth*.7, h = window.innerHeight*.7;
function Id(obj) { return document.getElementById(obj); }
Id('cube').style.width = w+'px';
Id('cube').style.height = h+'px';
Id('front').style.width = w+'px';
Id('front').style.height = h+'px';
Id('side').style.width = w+'px';
Id('side').style.height = h+'px';
Id('front').style.webkitTransform = 'translateZ('+(w/2)+'px)';
Id('side').style.webkitTransform = 'rotateX(-90deg) translateZ('+(h/2)+'px)';
</script>
但是-webkit-perspective“放大”并像素化内容并将部分内容推离屏幕。我找不到任何可以在不同窗口大小上正确偏移/居中立方体的页边距。
如何让这个立方体在页面上完美居中？一旦我能够以编程方式使其居中，我应该能够轻松地将其填充到整个屏幕上。
我找不到任何关于 perspective 的文章来解释如何将其与任何窗口边界对齐。
这有点像我正在寻找的，以可扩展的方式：
谢谢，
【问题讨论】：
标签： css css-transitions css-animations css-transforms