如何使用css沿x轴旋转三维立方体

Question

我是编程新手，我想使用css沿着x轴旋转三维立方体。

我已经添加了立方体，下面是它的html和css。

有人能告诉我如何添加动画吗。

下面是的代码

<div id="wrapper">
<div class="cube">
<!--Front-->
<div></div>
<!--Back-->
<div></div>
<!--Left-->
<div></div>
<!--Right-->
<div></div>
<!--Top-->
<div></div>
<!--Bottom-->
<div></div>
</div>
</div>
#wrapper{
width:300px;
height:300px;
perspective:700px;
-webkit-perspective:700px;
margin:100px auto;
}
.cube{
position:relative;
width:150px;
height:150px;
transform-style:preserve-3d;
transform:rotateY(35deg) rotatex(-38deg);
}
.cube div{
position:absolute;
width:150px;
height:150px;
background:rgba(0,0,0,0.1);
}
.cube div:nth-child(1){
transform:translateZ(75px);
background:#666666;
}
.cube div:nth-child(2){
transform: rotateX(180deg) translateZ(75px);
background:#4d4d4d;
}
.cube div:nth-child(3){
transform: rotateY(-90deg) translateZ(75px);
background:#666666;
}
.cube div:nth-child(4){
transform:rotateY(90deg) translateZ(75px);
background:#4d4d4d;
}
.cube div:nth-child(5){
transform: rotateX(90deg) translateZ(75px);
background:#666666;
}
.cube div:nth-child(6){
transform:rotateX(-90deg) translateZ(75px);
background:#4d4d4d;
}

我希望它像这个例子一样旋转立方体https://www.youtube.com/watch?v=3yLL9ADo-ko

有人能帮我做这个吗。我想让立方体从x轴旋转。。。谢谢

Answer 1

我看到，对于cube类下的<div>标签，您有注释，说明哪些应该是正面、背面、左侧等。只需为每一侧的名称放入类，然后为每一侧添加以下CSS。然后，您需要放入keyframes选择器和animation属性来在x轴上旋转立方体。我的代码片段显示了完整的CSS，然后是完整的HTML:

.back {
transform: translateZ(-100px) rotateY(180deg);
background-color: red;
opacity: 0.5;
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
background-color: green;
opacity: 0.5;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
background-color: yellow;
opacity: 0.5;
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
background-color: purple;
opacity: 0.5;
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
background-color: orange;
opacity: 0.5;
}
.front {
transform: translateZ(100px);
background-color: blue;
opacity: 0.5;
}
.wrapper {
perspective: 800px;
perspective-origin: 50% 100px;
margin-left: 100px;
margin-top: 100px;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
text-align: center;
}
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}

<div class="wrapper">
<div class="cube">
<div class="front">Front</div>
<div class="back">Back</div>
<div class="top">Top</div>
<div class="bottom">Bottom</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</div>

我决定在立方体的每一边都添加背景色，并写上"正面"或"背面"之类的文字，使其看起来整洁。你可以根据自己的意愿编辑出来。我还在这里做了一个JSFiddle：https://jsfiddle.net/vhwu5xjs/

Answer 2

您可以使用CSS动画来实现不同类型的动画。有关详细信息，您可以查看以下链接-https://www.w3schools.com/css/css3_animations.asp

你可以像这样创建自己的动画-

@keyframes example {
from {transform: rotateY(0deg);}
to {transform: rotateY(360deg);}
}

并使用以下控件运行动画-

animation-name
animation-duration
animation-delay
animation-iteration-count
animation-direction
animation-timing-function
animation-fill-mode
animation

我已经修改了您的一些代码，以实现您想要的。请看下面的代码笔-https://codepen.io/ashfaq_haq/pen/JjjJZvp