Question

如何相对于屏幕中心进行体变换，而不是沿着Y轴的页面中心？

链接到代码 http://codepen.io/anon/pen/gPqKXe 它更适用于publish1的文本，它更适用于publish2

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我不确定，但也许你想要一个固定在屏幕上的div包装器。遵循css规则可以帮助您：

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

和

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

如果您希望将其放在页面中心（沿着页眉和页脚），您可以创建一个包装器并将其置于绝对位置。前50％并且使用transform：translate（-50％， - 50％）。

Answer 2

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

否则：

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

css动画转换中心由屏幕中心

2 个答案: