CSS使旋转立方体居中

Question

我想在这个网站https://www.observian.com/上创建一个六角形的旋转文本，但是现在它不是在屏幕上居中。它一直移动到页面顶部。我该怎么做才能使这个立方体始终以x轴和y轴为中心呢?

.stage {
margin: 1em auto;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
perspective: 1200px;
/*transform:perspective(400px) translate(0px, -85px) rotateX(90deg);*/

}
.spinner5 div {
position: absolute;
border: 1px solid #ccc;
background: rgba(255, 255, 255, .8);
box-shadow: inset 0 0 20px rgba(0, 0, 0, .2)
}
@keyframes spinner5 {
from, 15% {
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
transform: rotateX(0) ;
border:thin solid red;
}
20%, 35% {
-moz-transform: rotateX(72deg);
-ms-transform: rotateX(72deg);
transform: rotateX(72deg) ;
border:thin solid green;
}
40%, 55% {
-moz-transform: rotateX(144deg);
-ms-transform: rotateX(144deg);
transform: rotateX(144deg) ;
border:thin solid blue;

}
60%, 75% {
-moz-transform: rotateX(216deg);
-ms-transform: rotateX(216deg);
transform: rotateX(216deg) ;
border:thin solid black;
}
80%, 95% {
-moz-transform: rotateX(288deg);
-ms-transform: rotateX(288deg);
transform: rotateX(288deg) ;
border:thin solid yellow;
}
to {
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg) ;
border:thin solid orange;
}
}
.spinner5 {
-webkit-animation-name: spinner5;
-webkit-animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
animation-name: spinner5;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-duration: 20s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;


}
.spinner5  div{
font-size:95px;
color:green;
width:500px;
background-color:yellow;
text-align:center;
height:110px;
transform:scale(-1, -1);
}

<div class="stage" style="width: 240px; height: 160px;margin-top:200px">
<div class="spinner5">
<div style="-webkit-transform: rotateX(0deg) translateZ(110px); -moz-transform: rotateX(0deg) translateZ(110px); -ms-transform: rotateX(0deg) translateZ(110px); " >text1 </div>
<div style="-webkit-transform: rotateX(72deg) translateZ(110px); -moz-transform: rotateX(72deg) translateZ(110px); -ms-transform: rotateX(72deg) translateZ(110px); ">text 2</div>
<div style="-webkit-transform: rotateX(144deg) translateZ(110px); -moz-transform: rotateX(144deg) translateZ(110px); -ms-transform: rotateX(144deg) translateZ(110px); ">text 3</div>
<div style="-webkit-transform: rotateX(216deg) translateZ(110px); -moz-transform: rotateX(216deg) translateZ(110px); -ms-transform: rotateX(216deg) translateZ(110px); ">text 4</div>
<div style="-webkit-transform: rotateX(288deg) translateZ(110px); -moz-transform: rotateX(288deg) translateZ(110px); -ms-transform: rotateX(288deg) translateZ(110px); ">text 5 </div>
</div>
</div>

我把代码放在https://jsfiddle.net/araneta/486htkqn/2/

Answer 1

先重置所有padding和margin使用通用选择器，然后添加width和height到父元素.stage视图宽度和视图高度计量单位=>width: 100vw; height: 100vh;，则加一个计算量to andtop padding=比;padding-top: calc(50vh - 55px);和左padding=比;padding-left: calc(50vw - 250px);

55px一半是的高度旋转器元素和250px是一半宽度旋转控件元素。然后你的父元素将简单地添加padding left50视图宽度和50视图高度减宽度和height旋转器的

元素。

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.stage {
width: 100vw; 
height: 100vh;
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-ms-perspective: 1200px;
perspective: 1200px;
/*transform:perspective(400px) translate(0px, -85px) rotateX(90deg);*/
padding-top: calc(50vh - 55px);
padding-left: calc(50vw - 250px)
}
.spinner5 div {
position: absolute;
border: 1px solid #ccc;
background: rgba(255, 255, 255, .8);
box-shadow: inset 0 0 20px rgba(0, 0, 0, .2);
}
@keyframes spinner5 {
from,
15% {
-moz-transform: rotateX(0);
-ms-transform: rotateX(0);
transform: rotateX(0);
border: thin solid red;
}
20%,
35% {
-moz-transform: rotateX(72deg);
-ms-transform: rotateX(72deg);
transform: rotateX(72deg);
border: thin solid green;
}
40%,
55% {
-moz-transform: rotateX(144deg);
-ms-transform: rotateX(144deg);
transform: rotateX(144deg);
border: thin solid blue;
}
60%,
75% {
-moz-transform: rotateX(216deg);
-ms-transform: rotateX(216deg);
transform: rotateX(216deg);
border: thin solid black;
}
80%,
95% {
-moz-transform: rotateX(288deg);
-ms-transform: rotateX(288deg);
transform: rotateX(288deg);
border: thin solid yellow;
}
to {
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
transform: rotateX(360deg);
border: thin solid orange;
}
}
.spinner5 {
-webkit-animation-name: spinner5;
-webkit-animation-timing-function: ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 20s;
animation-name: spinner5;
animation-timing-function: ease-out;
animation-iteration-count: infinite;
animation-duration: 20s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.spinner5 div {
font-size: 95px;
color: green;
width: 500px;
background-color: yellow;
text-align: center;
height: 110px;
transform: scale(-1, -1);
}

<div class="stage">
<div class="spinner5">
<div style="-webkit-transform: rotateX(0deg) translateZ(110px); -moz-transform: rotateX(0deg) translateZ(110px); -ms-transform: rotateX(0deg) translateZ(110px); ">text1 </div>
<div style="-webkit-transform: rotateX(72deg) translateZ(110px); -moz-transform: rotateX(72deg) translateZ(110px); -ms-transform: rotateX(72deg) translateZ(110px); ">text 2</div>
<div style="-webkit-transform: rotateX(144deg) translateZ(110px); -moz-transform: rotateX(144deg) translateZ(110px); -ms-transform: rotateX(144deg) translateZ(110px); ">text 3</div>
<div style="-webkit-transform: rotateX(216deg) translateZ(110px); -moz-transform: rotateX(216deg) translateZ(110px); -ms-transform: rotateX(216deg) translateZ(110px); ">text 4</div>
<div style="-webkit-transform: rotateX(288deg) translateZ(110px); -moz-transform: rotateX(288deg) translateZ(110px); -ms-transform: rotateX(288deg) translateZ(110px); ">text 5 </div>
</div>
</div>