运用CSS3 3D转换实现案例—旋转木马

1.首先搭建HTML结构

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>
           

   里面的六个div分别是想要插入的图片

   最后旋转的还是section这个标签

2.CSS样式

    1.给body添加透视效果 perspective：1000px;

    2.给section添加3d呈现效果控制里面的6个div

    3.里面的六个div全部绝对定位叠到一起，然后移动不同角度旋转和距离

              角度用rotateY，距离用translateZ来控制

     4.给section添加动画animation，即可自动旋转

body{
    /*添加透视*/
    perspective: 1000px;
}


section{
    position: relative;
    width: 300px;
    height: 200px;
    /*为子盒子开启三维立体环境*/
    transform-style: preserve-3d;
    /*谁做动画给谁加*/
    animation: play 10s linear infinite;
}
/*鼠标经过  停止旋转*/
section:hover{
    animation-play-state: paused;

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

}
section div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('输入图片');
}
section div:nth-child(1){
    transform: translateZ(300px);
}
section div:nth-child(2){
    transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(1){
    transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(1){
    transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(1){
    transform: rotateY(240deg) translateZ(300px);
}
section div:nth-child(1){
    transform: rotateY(300deg) translateZ(300px);
}