css动画转换中心通过屏幕中心

Question

如何使相对于屏幕中心而不是沿着Y轴的页面中心发生身体转换？

链接代码 http://codepen.io/anon/pen/gPqKXe 它是publish1更多的文字这是publish2更多的文字

\t \t .blok { 
 
    height: 100px; 
 
    background-color: #92FF00; 
 
    border: 2px solid black; 
 
    font-size:36px; 
 
    text-align: center; 
 
    padding: 85px 0 35px 0 ; 
 
} 
 
    
 
body { 
 
\t transform: perspective(200px); 
 
    
 
    \t -webkit-transform-style: preserve-3d; 
 
\t -webkit-transform-origin: 0% 50%; 
 
\t -webkit-animation: rotateRightSideFirst 5s forwards ease-in; 
 
\t -moz-transform-style: preserve-3d; 
 
\t -moz-transform-origin: 0% 50%; 
 
\t -moz-animation: rotateRightSideFirst 5s forwards ease-in; 
 
\t transform-style: preserve-3d; 
 
\t transform-origin: 50% 50%; 
 
\t animation: rotateRightSideFirst 5s forwards ease-in; 
 
    
 
} 
 

 

 
@-webkit-keyframes rotateRightSideFirst { 
 
\t 50% { -webkit-transform: translateZ(-700px) ; 
 
\t \t -webkit-animation-timing-function: ease-out; } 
 
\t 100% { -webkit-transform: translateZ(-200px); } 
 
} 
 

 
@-moz-keyframes rotateRightSideFirst { 
 
\t 50% { -moz-transform: translateZ(-700px) ; -moz-animation-timing-function: ease-out; } 
 
\t 100% { -moz-transform: translateZ(-200px); } 
 
} 
 

 
@keyframes rotateRightSideFirst { 
 
\t 50% { transform: translateZ(-700px) ; animation-timing-function: ease-out; } 
 
\t 100% { transform: translateZ(-200px); } 
 
} 
 
\t \t

<div class="blok">1</div> 
 
    <div class="blok">2</div> 
 
    <div class="blok">3</div> 
 
    <div class="blok">4</div> 
 
    <div class="blok">5</div> 
 
    <div class="blok">6</div> 
 
    <div class="blok">7</div> 
 
    <div class="blok">8</div> 
 
    <div class="blok">9</div> 
 
    <div class="blok">10</div> 
 
    <div class="blok">11</div> 
 
    <div class="blok">12</div> 
 
    <div class="blok">13</div> 
 
    <div class="blok">14</div> 
 
    <div class="blok">15</div> 
 
    <div class="blok">16</div> 
 
    <div class="blok">17</div> 
 
    <div class="blok">18</div> 
 
    \t \t \t

Answer 1

我不知道，但也许你想有一个div这是固定在屏幕上的包装。下面的CSS规则会帮助你：

.fixedWrapper { 
    position: fixed; 
    left: 0px; 
    right: 0px; 
    height:100%; 
    width:100% 
} 

而且

<div class="fixedWrapper"> 
... your html content... 
</div> 

如果你想拥有它的页面的中心（沿页眉和页脚），您将创建一个包装和定位它绝对左&顶部50％，并与变换：翻译（-50％，-50％）以及。

Answer 2

如果.blok有宽度设置，您可以使用margin: 0 auto;。

否则：

.blok { 
    position: relative; 
    left: 50%; 
    transform: translateX(-50%); 
}