如何使用CSS沿x轴旋转3d立方体？

Question

我是编程新手，我想使用CSS沿x轴旋转3d立方体。

我已经添加了多维数据集，下面是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

[我看到<div>类下有cube标签，您有评论说应该是正面，背面，左侧等。只需在类中输入每一面的名称然后为每个添加以下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

我已经修改了一些代码以实现所需的功能。请看下面的codepen-https://codepen.io/ashfaq_haq/pen/JjjJZvp