全屏CSS3"立方体"过渡
Aar*_*ion 4 css3 css-transitions css-transforms css-animations
我正在使用此处提供的代码: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;
}
.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该解释如何将其与任何窗口边界对齐的文章.
这是我正在寻找的,可扩展的方式: 
谢谢,
那么,你问的微积分很难.
好消息是你真的不需要这样做.
在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
上面的代码片段使用视口单元,因为这些是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>