VIP26/day17/css/7.旋转的立方体.css

* {
    margin: 0;
    padding: 0;
}

body {
    /* 透视距离 */
    perspective: 1000px;
    /* transform: perspective(1000px); */
}

#container {
    width: 200px;
    height: 200px;
    margin: 200px auto;
    position: relative;
    border: 1px solid #000;
    transform-style: preserve-3d;
    animation: run 3s linear infinite;
}

#container div {
    width: 200px;
    height: 200px;
    position: absolute;
    opacity: .5;
    border: 1px solid #000;
}

#box1 {
    background: url('../images/a.jpg');
    transform: translateZ(100px);
}

#box2 {
    background: url("../images/b.jpg");
    transform: rotateY(180deg)  translateZ(100px);
}

#box3 {
    background: url("../images/c.jpg");
    transform: rotateY(90deg) translateZ(100px);
}

#box4 {
    background: url("../images/d.jpg");
    transform: rotateY(-90deg) translateZ(100px);
}

#box5 {
    background: url("../images/e.jpg");
    transform: rotateX(90deg) translateZ(100px);
}

#box6 {
    background: url("../images/f.jpg");
    transform: rotateX(-90deg) translateZ(100px);
}

@keyframes run {
    100% {
        transform: rotateY(360deg);
    }
}