我已经使用CSS创建了3d立方体，现在我想在HTML页面上旋转该立方体。我的问题是当多维数据集旋转时，它也移动到侧面，我需要它保持在原位并旋转。
我曾尝试将div的posistion更改为relative，这将立方体的侧面分散了，但仍使其旋转到侧面。
我相信问题与转换原点有关，但是无论我如何更改值都无济于事。
.spinner div {
position: absolute;
display: inline-block;
width: 300px;
height: 300px;
border: 2px solid rgb(0, 0, 0);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 100px;
}
.spinner .face1 {
transform: translateZ(150px);
background-color: blue;
}
.spinner .face2 {
transform: rotateY(90deg) translateZ(150px);
background-color: rgb(184, 187, 31);
}
.spinner .face3 {
transform: rotateY(180deg) translateZ(150px);
background-color: green;
}
.spinner .face4 {
transform: rotateY(-90deg) translateZ(150px);
background-color: red;
}
.spinner {
animation: spincube 6s infinite;
transform-style: preserve-3d;
transform-origin: 50% 0;
}
.center-screen {
display: flex;
flex-direction: column;
justify-content: top;
align-items: top;
text-align: center;
margin-top: 10%;
margin-left: 40%;
}
@keyframes spincube {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(-360deg)
}
}<body>
<div class="center-screen">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
</div>
</div>
</body>如前所述，我希望立方体保持原位，但会滑到侧面。
最佳答案
我将像下面那样重新调整变换，以确保幻灯片位于主要元素的中心，该元素是一个空元素。
请注意使用translateX来达到所需的效果。
.spinner div {
position: absolute;
width: 100px;
height: 100px;
border: 2px solid rgb(0, 0, 0);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 80px;
}
.spinner .face1 {
transform: translateZ(50px) translateX(-50%);
background-color: blue;
}
.spinner .face2 {
transform: rotateY(90deg);
background-color: rgb(184, 187, 31);
}
.spinner .face3 {
transform: translateZ(-50px) translateX(-50%) rotateY(180deg) ;
background-color: green;
}
.spinner .face4 {
transform: translateX(-100%) rotateY(-90deg);
background-color: red;
}
.spinner {
animation: spincube 6s infinite;
transform-style: preserve-3d;
display: inline-block; /* This is important !!*/
outline: 5px solid red; /* to illustrate */
}
.center-screen {
text-align: center;
margin-top: 10%;
}
@keyframes spincube {
to {
transform: rotateY(-360deg)
}
}<div class="center-screen">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
</div>
</div>您也可以依靠
left来处理此问题：.spinner div {
position: absolute;
width: 100px;
left:-50px;
height: 100px;
border: 2px solid rgb(0, 0, 0);
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4);
text-align: center;
font-size: 80px;
}
.spinner .face1 {
transform: translateZ(50px);
background-color: blue;
}
.spinner .face2 {
transform: rotateY(90deg);
background-color: rgb(184, 187, 31);
left:0;
}
.spinner .face3 {
transform: translateZ(-50px) rotateY(180deg) ;
background-color: green;
}
.spinner .face4 {
transform:rotateY(-90deg);
background-color: red;
left:-100px;
}
.spinner {
animation: spincube 6s infinite;
transform-style: preserve-3d;
display: inline-block; /* This is important !!*/
outline: 5px solid red; /* to illustrate */
position:relative;
}
.center-screen {
text-align: center;
margin-top: 10%;
}
@keyframes spincube {
to {
transform: rotateY(-360deg)
}
}<div class="center-screen">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
</div>
</div>关于html - 如何使3D立方体旋转到位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56953661/