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%); 
}