>我已经使用CSS创建了一个3d立方体,现在我想在我的HTML页面上旋转该立方体。我的问题是当立方体旋转时,它也向两侧移动,我需要它保持在原位并旋转。
我尝试将我的div 的 posis更改为相对,这会分散立方体侧面并仍然使其向两侧旋转。我相信这个问题与转换起源有关,但是无论我如何更改值都无济于事。
.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>
你可以做这样的事情:学分:https://codepen.io/bcgwebdesign/pen/gRXxxR?editors=0100
提示:Codepen 上有很多这样的演示
/* keyframes for rotating animation */
@-webkit-keyframes spinX {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
@-webkit-keyframes spinBoth {
from { transform: rotateY(0) rotateX(0); }
to { transform: rotateY(360deg) rotateX(0deg) ; }
}
@-webkit-keyframes spinY {
from { transform: rotateX(0); }
to { transform: rotateX(360deg); }
}
@-webkit-keyframes recolor {
0% { background: rgba(0,255,0,0.1); }
33% { background: rgba(255,0,0,0.1); }
66% { background: rgba(0,0,255,0.1); }
}
/* scene wrapper */
.wrapper{
height: 300px;
margin-top:0;
position:relative;
perspective: 1000px;
perspective-origin: 50% -50px;
}
/* cube wrapper */
.cube {
position: relative;
margin: 200px auto;
width: 200px;
transform-style: preserve-3d;
animation: spinBoth 5s infinite ease-in-out;
transition: all 1s linear;
}
/* outer cube */
b {
position:absolute;
width:200px;
height:200px;
display:block;
background:rgba(255,0,0,0.1);
box-shadow:inset 0 0 30px rgba(0,0,0,0.2);
font-size:20px;
text-align:center;
line-height:200px;
color:rgba(0,0,0,0.5);
font-family:sans-serif;
text-transform:uppercase;
transition: all 1s linear;
}
b.back{
transform: translateY(-100px) translateZ(-100px) rotateY(180deg);
}
b.right{
transform:translateY(-100px) rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
b.left{
transform:translateY(-100px)rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
b.top{
transform:rotateX(-90deg) translateY(-100px) translateZ(-100px);
transform-origin: top center;
}
b.bottom{
transform:rotateX(90deg) translateY(100px) translateZ(100px);
transform-origin: bottom center;
}
b.front{
transform: translateZ(100px) translateY(-100px);
}
<div class="wrapper">
<div class="cube">
<b class="front">front</b>
<b class="back">back</b>
<b class="top">top</b>
<b class="bottom">bottom</b>
<b class="left">left</b>
<b class="right">right</b>
</div>
</div>