css animation transformation center by screen center - css

Question

How to make a body transformation has occurred relative to the center of the screen, not the center of the page along the Y-axis ?
link to the code
http://codepen.io/anon/pen/gPqKXe
it is more text for publish1 it is more text for publish2
.blok {
height: 100px;
background-color: #92FF00;
border: 2px solid black;
font-size:36px;
text-align: center;
padding: 85px 0 35px 0 ;
}
body {
transform: perspective( 200px );
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotateRightSideFirst 5s forwards ease-in;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 0% 50%;
-moz-animation: rotateRightSideFirst 5s forwards ease-in;
transform-style: preserve-3d;
transform-origin: 50% 50%;
animation: rotateRightSideFirst 5s forwards ease-in;
}
#-webkit-keyframes rotateRightSideFirst {
50% { -webkit-transform: translateZ(-700px) ;
-webkit-animation-timing-function: ease-out; }
100% { -webkit-transform: translateZ(-200px); }
}
#-moz-keyframes rotateRightSideFirst {
50% { -moz-transform: translateZ(-700px) ; -moz-animation-timing-function: ease-out; }
100% { -moz-transform: translateZ(-200px); }
}
#keyframes rotateRightSideFirst {
50% { transform: translateZ(-700px) ; animation-timing-function: ease-out; }
100% { transform: translateZ(-200px); }
}
<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>

Answer 1

I'm not sure but maybe you would like to have a div wrapper thats fixed on screen. Following css rule would help you:
.fixedWrapper {
position: fixed;
left: 0px;
right: 0px;
height:100%;
width:100%
}
And
<div class="fixedWrapper">
... your html content...
</div>
If you'd like to have it in center of page (along the header and footer) you would create a wrapper and position it absolute with left & top 50% and with transform: translate(-50%, -50%) as well.

Answer 2

If .blok haa a width set you can use margin: 0 auto;.
Otherwise:
.blok {
position: relative;
left: 50%;
transform: translateX(-50%);
}