使用CSS製作簡易3D效果旋轉木馬實例程式碼

最近來看看css3d的一些特性，想著也實驗學習一下，製作個小demo之類的。就練習了一下。開發一個粗糙的選擇木馬效果，如圖

其實就是找到角度和位置，計算每根柱子的旋轉角度擺放到3d空間的置頂位置即可。然後利用css的animate屬性讓3d舞台無線旋轉，就有了一簡易的旋轉木馬效果。有興趣的可以看一下，可以把程式碼中的圖片路徑改為自己的圖片位址就行了。直接可用。

程式碼如下：

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>

            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
            
•                 
              
        

    

#

以上是使用CSS製作簡易3D效果旋轉木馬實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！