Verwenden Sie CSS, um einen einfachen Beispielcode für ein 3D-Effektkarussell zu erstellen

Ich habe mir kürzlich einige Funktionen von CSS3D angesehen und darüber nachgedacht, damit zu experimentieren und eine kleine Demo zu erstellen. Üben einfach eine Weile. Die Entwicklung eines groben Auswahl-Trojaner-Effekts, wie in der Abbildung

gezeigt, besteht eigentlich darin, den Winkel und die Position zu ermitteln, den Drehwinkel jeder Spalte zu berechnen und sie an der oberen Position zu platzieren im 3D-Raum. Verwenden Sie dann das animate-Attribut von CSS, um die 3D-Bühne drahtlos rotieren zu lassen, und Sie erhalten einen einfachen Karusselleffekt. Wenn Sie interessiert sind, können Sie einfach den Bild-Pfad im Code in Ihre eigene Bildadresse ändern. Direkt verfügbar.

Der Code lautet wie folgt:

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>

            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
        

    

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um einen einfachen Beispielcode für ein 3D-Effektkarussell zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!