旋转的立方体

旋转立方体

html部分

用ul来表示整个立方体,用li来表示立方体的六个面

<div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul> 
</div>

为每个面设置不同的样式

li{
    font-size: 20px;
    line-height: 200px;
    text-align: center;
    list-style: none;
    position: absolute;   /* 防止正方体六个面位置错乱 */
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    left: 0px;
    top: 0px;
    opacity: 0.5;
}




li:nth-child(1){
    background-color: lightblue;
    transform: translateZ(100px);
}
li:nth-child(2){
    background-color: lightcoral;
    transform: translateZ(-100px);
}
li:nth-child(3){
    background-color: lightgoldenrodyellow;
    transform: translateX(100px) rotateY(90deg);
}
li:nth-child(4){
    background-color: lightseagreen;
    transform: translateX(-100px) rotateY(90deg);
}
li:nth-child(5){
    background-color: lightpink;
    transform: translateY(100px) rotateX(90deg);
}
li:nth-child(6){
    background-color: lightgray;
    transform: translateY(-100px) rotateX(90deg);
}

让正方体立起来

ul{
    padding: 0px;

    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    margin: 100px auto;

    transform: rotateX(-45deg) rotateY(-45deg);
}

通过旋转div使正方体转动

@keyframes rotate {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg)
    }
}

div{
    height: 400px;

    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
}

效果