CSS3制作动画案例（一）

哈喽！没错又是我。
现在给大家展示我用CSS3做的一些3D案例吧！
就是这个啦，其实还有动画效果的，就是截不下来。
剧本@keyframes代码：

@keyframes boss {
    from {
        transform: rotateX(-15deg) rotateY(0deg);
    }
    to {
        transform: rotateX(-15deg) rotateY(360deg);
    }
}

各个方块代码：
八张照片，平分360度，那枚就需要每个照片的围绕Y轴旋转45度。

.staff1 {
    background-image: url(../img/feng.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateY(45deg) translateZ(400px);
}
.staff2 {
    background-image: url(../img/feng1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateY(90deg) translateZ(400px);
}
.staff3 {
    background-image: url(../img/feng2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateY(135deg) translateZ(400px);
}
.staff4 {
    background-image: url(../img/feng3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateY(180deg) translateZ(400px);
}
.staff5 {
    background-image: url(../img/feng4.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateY(225deg) translateZ(400px);
}
.staff6 {
    background-image: url(../img/feng5.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateY(270deg) translateZ(400px);
}
.staff7 {
    background-image: url(../img/feng6.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateY(315deg) translateZ(400px);
}
.staff8 {
    background-image: url(../img/feng7.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotateY(360deg) translateZ(400px);
}

也不懂得可以扣我，想要这个源代码试试看的小伙伴也可以评论我吼！（3D确实不太好讲，就看大家的动手能力啦！一定要自己先试！）