欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-19 15:57:34
...

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);
}