旋转木马案例

最新推荐文章于 2022-08-04 22:59:31 发布

原创最新推荐文章于 2022-08-04 22:59:31 发布 · 2.5k 阅读

CC 4.0 BY-SA版权

本文详细探讨了旋转木马效果的实现原理，从动画机制到布局策略，涵盖关键技术和难点解决方法，帮助开发者理解并创建自己的旋转木马展示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
  
            body{
                background-color:black;
            }
            *{
                margin: 0;
                padding: 0;
            }
            #main img{
                width:300px;
                height: 400px;
                position: absolute;
                border:5px green double;
            }
            #main img:nth-child(1){
                transform: translateZ(500px);
            } 
            #main img:nth-child(2){
                transform: rotateY(40deg) translateZ(500px);
            }
            #main img:nth-child(3){
                transform: rotateY(80deg) translatez(500px);
            }
            #main img:nth-child(4){
                transform: rotateY(120deg) translatez(500px);
            }
            #main img:nth-child(5){
                transform: rotateY(160deg) translatez(500px);
            }
            #main img:nth-child(6){
                transform: rotateY(200deg) translatez(500px);
            }
            #main img:nth-child(7){
                transform: rotateY(240deg) translatez(500px);
            }
            #main img:nth-child(8){
                transform: rotateY(280deg) translatez(500px);
            }
            #main img:nth-child(9){
                transform: rotateY(320deg) translatez(500px);
            }
            
            /*# id选择器   id不能重复命名*/
            #main{
                margin: 100px auto;/*让父元素居中*/
                width: 300px;
                height: 400px;
                /*声明一个3D空间*/
                transform-style: preserve-3d;
                transform: rotateY(-10deg);
                animation-name: animate;
                animation-duration: 10s; /*动画执行次数*/
                animation-iteration-count: infinite; /*动画持续时间：无限 */
                animation-timing-function: linear;
                position: relative;
            }
            
            /*定义一个动画*/
            @keyframes animate {
                0%{
                    transform: rotateX(-10deg) rotateY(0deg) ;
                }
                100%{
                    transform: rotateX(-10deg) rotateY(360deg) ;
                }
            }
        </style>
    </head>
    <body>
        <div id="main">
            <img src="../image/01.gif" alt="">
            <img src="../image/02.gif" alt="">
            <img src="../image/03.gif" alt="">
            <img src="../image/04.gif" alt="">
            <img src="../image/05.gif" alt="">
            <img src="../image/06.gif" alt="">
            <img src="../image/08.gif" alt="">
            <img src="../image/07.gif" alt="">
            <img src="../image/07.gif" alt="">
        </div>
    </body>
</html>