Utilisez CSS pour créer un exemple de code simple de carrousel d'effets 3D-tutoriel CSS-php.cn

Utilisez CSS pour créer un exemple de code simple de carrousel d'effets 3D

高洛峰

Libérer： 2017-03-16 11:24:36

original

2065 Les gens l'ont consulté

J'ai récemment jeté un œil à certaines fonctionnalités de CSS3D et j'ai pensé à les expérimenter et à faire une petite démo. Juste entrainez-vous pendant un moment. Développer un effet cheval de Troie de sélection approximative, comme le montre la figure

Utilisez CSS pour créer un exemple de code simple de carrousel deffets 3D

consiste en fait à trouver l'angle et la position, à calculer l'angle de rotation de chaque colonne et à la placer en position haute dans l'espace 3D. Utilisez ensuite l'attribut animate de CSS pour laisser la scène 3D tourner sans fil, et vous aurez un simple effet carrousel. Si vous êtes intéressé, vous pouvez y jeter un œil. Vous pouvez simplement remplacer le chemin image dans le code par votre propre adresse d'image. Disponible directement.

Le code est le suivant :

nbsp;html>
    <meta>
    <title></title>
    <style>
        .box{
            width:800px;
            height: 600px;
            margin:0px auto;
        }
        .box .stage{
            perspective:0px;
            perspective-origin: center center;
        }
        .box .stage .container{
            transform-style: preserve-3d;

        }
        .box ul,.box li{
            list-style: none;
            margin:0px;
            padding:0px;
            text-align: center;
            font-weight: bold;
        }
        .box ul{
            margin-left:200px;
            width:400px;
            height:400px;
        }
        .box li{
            position: absolute;
            margin-left:200px;
            width:10px;
            height:300px;
            background: blue;
            color:red;
            transform-origin: 5px top;
        }

        .box li> .horse{
            width:100px;
            height:100px;
            position: absolute;
            top:298px;
            left:-55px;
            border-radius: 50px;
            background-image: url("horse.jpg");
            background-size: contain;
        }

        .box ul{
            animation: run 20s linear infinite;
        }

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

        @-webkit-keyframes horserun {
            0%{
                transform: translateY(0px);
            }
            100%{
                transform: translateY(50px);
            }
        }    </style>
    <script></script>
    <script>

        $(function(){            var len=$(".container>li").length;
            $(".container>li").each(function(e){                var index=$(".container>li").index(this)+1;
                $(this).css({                   "transform":"rotateY("+360/len * index+"deg) skew(60deg)"                });

            });
        })    </script><p>
    </p><p>
        </p>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!