全屏 CSS3 "Cube" 过渡

Question

我正在使用此处提供的代码：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 "zooms" 对内容进行像素化处理，并将部分内容推离屏幕。我找不到任何可以正确 offset/center 页面上不同 window 大小的多维数据集的边距。

如何使这个立方体在页面上完美居中？一旦我能够以编程方式使其居中，我应该能够轻松地将其填充到整个屏幕上。

我找不到任何关于 perspective 的文章来解释如何将其与任何 window 边界对齐。

这正是我正在寻找的可扩展方式：

谢谢，

Answer 1

嗯，你问的微积分很难。

好消息是你真的不需要这样做。

任何放置在 z 方向 0 处的对象都不会被透视缩放。因此，诀窍是将立方体的正面放置在 z = 0px 处。

另一方面，要使其具有响应性，我们需要使用视口单位。像这样：

html,body{
    margin: 0;
    height: 100%;
    width: 100%;
}

#experiment {
    perspective: 200vw;
    height: 100%; 
    width: 100vw; 
    border: solid 1px blue;
}

.cube {
    position: relative;
    height: 100%; 
    width: 100vw; 
    transform-style: preserve-3d;
}
.face {
    position: absolute;
    height: 100%; 
    width: 100%; 
    color: #fff;
    transition: transform 4s linear;
}
.cube .front {
    transform: translateZ(-50vw) rotateY(0deg) translateZ(50vw); 
    transform-origin: center center;
    background-color:gray;
}

.cube .side {
    transform: translateZ(-50vw) rotateY(-90deg) translateZ(50vw);
    background-color:lightgray;
}

.cube:hover .front {
    transform: translateZ(-50vw) rotateY(90deg) translateZ(50vw); 
}

.cube:hover .side {
    transform: translateZ(-50vw) rotateY(0deg) translateZ(50vw);
}

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

关于链式旋转的想法来自 Lea Verou here

上面的代码片段使用视口单位，因为这是对 z 移动的唯一响应方法。但是 vW 在 iOS 中是有问题的。下面是一个更复杂的解决方案，不使用 vW（使用百分比维度，只能在 translateX 中设置。因此需要 2 个额外的旋转。

html,body{
    margin: 0;
    height: 100%;
    width: 100%;
}

#experiment {
    perspective: 2000px;
    height: 100%; 
    width: 100%; 
  overflow: hidden;
}

.cube {
    position: relative;
    height: 100%; 
    width: 100%; 
    transform-style: preserve-3d;
}
.face {
    position: absolute;
    height: 100%; 
    width: 100%; 
    color: #fff;
    transition: transform 4s linear;
}
.cube .front {

    transform:  rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg);
    transform-origin: center center;
    background-color:gray;
}

.cube .side {
    transform:  rotateY(-90deg) translateX(-50%) rotateY(-90deg) translateX(50%) rotateY(90deg); 
    background-color:lightgray;
}

.cube:hover .front {
    transform:  rotateY(-90deg) translateX(-50%) rotateY(90deg) translateX(50%) rotateY(90deg);
}

.cube:hover .side {
    transform:  rotateY(-90deg) translateX(-50%) rotateY(0deg) translateX(50%) rotateY(90deg); 
}

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

这里有一个小演示，试图展示转换的工作原理。就看吧。

.demo {
    height: 20px; 
    width: 400px; 
    background-color: lightblue;
    position: absolute;
    top: 200px;
}

.demo:after {
    content: "";
    position: absolute;
    background-color: red;
    width: 10px;
    height: 10px;
    left: 50%;
    top: 200px;
    border-radius: 50%;
}

#demo {
    -webkit-animation: demo 25s infinite;
    z-index: 2;
}

@-webkit-keyframes demo {
    0% {transform:  rotate(  0deg) translateX(  0%) rotate( 0deg) translateX( 0%) rotate( 0deg); }
   20% {transform:  rotate(  0deg) translateX(  0%) rotate( 0deg) translateX( 0%) rotate(90deg); }
   40% {transform:  rotate(  0deg) translateX(  0%) rotate( 0deg) translateX(50%) rotate(90deg); }
   60% {transform:  rotate(  0deg) translateX(  0%) rotate(30deg) translateX(50%) rotate(90deg); }
   80% {transform:  rotate(  0deg) translateX(-50%) rotate(30deg) translateX(50%) rotate(90deg); }
  100% {transform:  rotate(-90deg) translateX(-50%) rotate(30deg) translateX(50%) rotate(90deg); }
}

#text {
    width: 400px;
}

#text:after {
  content: "";
  background-color: rgba(200, 0, 0, 0.2);
  width: 300px;
  height: 1em;
  position: absolute;
  top: 15px;
  -webkit-animation: text 25s infinite;
}


@-webkit-keyframes text {
   10% {transform:  translateY(  0px)}
   30% {transform:  translateY( 20px)}
   50% {transform:  translateY( 40px)}
   70% {transform:  translateY( 58px)}
   90% {transform:  translateY( 76px)}
  100% {transform:  translateY( 92px)}
}

span {
  margin-left: 400px;
  top: 20px;
  width: 200px;
  border: solid 1px blue;
  position: absolute;
}

<div class="demo" id="demo"></div>
<div class="demo" id="demo2"></div>
<div id="text">
<ul id="phases">
<li >ROTATE to get the x axis </li>
<li >MOVE in the X axis (but really in Z)</li>
<li >ROTATE the wanted rotation </li>
<li >MOVE back in the X axis </li>
<li >ROTATE back the x axis trick </li>
<li >DONE </li>
</ul> 
</div>
<span>Do a rotation of 30deg around a point that is at a distance equal to 50% width in the z axis - Showed as a red point</span>

全屏 CSS3 "Cube" 过渡

Fullscreen CSS3 "Cube" Transition

css

css-transitions

css-transforms

css-animations