利用CSS3D效果製作簡易旋轉木馬效果

-Advertisement-

最近看一下css3d的一些特性，想著也實驗學習一下，製作個小demo之類的。就練習了一下。開發一個粗糙的選擇木馬效果，如圖其實就是找到角度和位置，計算每根柱子的旋轉角度擺放到3d空間的置頂位置即可。然後利用css的animate屬性讓3d舞臺無線旋轉，就有了一簡易的旋轉木馬效果。感興趣的可以看一下 ...

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

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

代碼如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <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 src="js/jquery-1.11.2.js"></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>
</head>
<body>
<div class="box">
    <div class="stage">
        <ul class="container">
            <li class="horse1">
                <div class="horse"></div>
            </li>
            <li style="background: orange">
                <div class="horse"></div>
            </li>
            <li style="background: #ffff00">
                <div class="horse"></div>
            </li>
            <li style="background: green">
                <div class="horse"></div>
            </li>
            <li style="background: blue">
                <div class="horse"></div>
            </li>
            <li style="background:lightskyblue ">
                <div class="horse"></div>
            </li>
            <li style="background: purple">
                <div class="horse"></div>
            </li>
            <li style="background: black">
                <div class="horse"></div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

學習css3d的試驗demo，覺得好玩就練習一下。。。

感謝閱讀。。。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

玩骰子麼

本demo應用了css3 transition animate，若有相容性問題，請升級你的瀏覽器！這次先讓大家玩玩！結構層表現層動畫的屬性值可以隨便調。骰子的每個面的公共樣式點數容器的公共樣式行為層 <!doctype html> <html> <head> <meta charset ...
如何自定義博客園導航欄？

今天向博客園申請開通JS功能，很快就得到了批准(速度超贊)。得到許可權後，花了點時間研究了一下如何修改博客導航欄的內容。由於博客園後臺並沒有給我們開通修改導航的功能，所以我們只能另闢蹊徑，利用我們學到的JavaScript知識，人工修改下導航內容。先來看代碼：然後，我們把寫好的js代碼，在管理界面 ...
移動WEB像素相關知識

瞭解移動web像素的知識，主要是為了切圖時心中有數。本文主要圍繞一個問題：怎樣根據設備廠商提供的屏幕尺寸和物理像素得到我們切圖需要的邏輯像素？圍繞這個問題以iphone5為例講解涉及到的web像素相關知識。一、前置知識 1、 iphone5的相關參數 iPhone 5 處理器蘋果A6處理器，1. ...
CSS3選擇器——基本選擇器

CSS是一種用於屏幕上渲染html，xml等一種語言，CSS主要是在相應的元素中應用樣式，來渲染相對應用的元素，那麼這樣我們選擇相應的元素就很重要了，如何選擇對應的元素，此時就需要我們所說的選擇器。選擇器主要是用來確定html的樹形結構中的DOM元素節點。我把CSS選擇器分開成三部分，第一部分是我們 ...
HTML5學習與鞏固——canvas繪圖象棋盤

一、HTML5canvas的學習與鞏固 1、第一次：canvas繪製象棋盤（笨方法）示例代碼： 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>canvas繪圖_象棋棋盤</title> 7 </head ...
Vue學習筆記-2

# 前言本文非vue教程，僅為學習vue過程中的個人理解與筆記，有說的不正確的地方歡迎指正討論# 1、computed計算屬性函數中不能使用vm變數在計算屬性的函數中，不能使用Vue構造函數返回的vm變數，因為此時vm還未返回，依然處於Vue內部構造函數過程中，遂只能使用this來代替vm。若要使... ...
點出漫天小星星

...
如何獲取url中的參數並傳遞給iframe中的報表

在使用報表軟體時，用戶系統左邊一般有目錄樹，點擊報表節點就會在右側網頁的iframe中顯示出報表，同時點擊的時候也會傳遞一些參數給網頁，比如時間和用戶信息等。如何使網頁中的報表能夠獲取到傳遞過來的參數呢？ ...