360度立體抽獎盒，定製屬於你的規則！

-Advertisement-

使用JS和CSS3實現360度立體抽獎盒效果圖：下麵為大家附上代碼喲，定製屬於你們的抽獎盒：如有錯誤，請聯繫指正，非常感謝！！！ ...

使用JS和CSS3實現360度立體抽獎盒

效果圖：

下麵為大家附上代碼喲，定製屬於你們的抽獎盒：

<!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>
        html,body,ul {margin: 0;padding: 0;}
        body {perspective: 1200px;overflow: hidden;}
        ul {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            -webkit-transition: preserve-3d;
            -moz-transition: preserve-3d;
            -ms-transition: preserve-3d;
            transition: 5s ease-out;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
            cursor: pointer;
        }
        ul li {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            list-style: none;
            color: #fff;
            font-size: 24px;
            text-align: center;
            line-height: 200px;
            border-radius: 10%;
        }

        li:nth-child(1) {
            background: rgba(145, 41, 55, 0.9);
            -webkit-transform: translateZ(100px);
            -moz-transform: translateZ(100px);
            -ms-transform: translateZ(100px);
            -o-transform: translateZ(100px);
            transform: translateZ(100px);
        }

        li:nth-child(2) {
            background: rgba(54, 49, 46, 0.9);
            -webkit-transform: rotateY(90deg) translateZ(100px);
            -moz-transform: rotateY(90deg) translateZ(100px);
            -ms-transform: rotateY(90deg) translateZ(100px);
            -o-transform: rotateY(90deg) translateZ(100px);
            transform: rotateY(90deg) translateZ(100px);
        }

        li:nth-child(3) {
            background: rgba(149, 121, 123, 0.9);
            -webkit-transform: translateZ(-100px);
            -moz-transform: translateZ(-100px);
            -ms-transform: translateZ(-100px);
            -o-transform: translateZ(-100px);
            transform: translateZ(-100px);
        }

        li:nth-child(4) {
            background: rgba(102, 99, 79, 0.9);
            -webkit-transform: rotateY(-90deg) translateZ(100px);
            -moz-transform: rotateY(-90deg) translateZ(100px);
            -ms-transform: rotateY(-90deg) translateZ(100px);
            -o-transform: rotateY(-90deg) translateZ(100px);
            transform: rotateY(-90deg) translateZ(100px);
            
        }

        li:nth-child(5) {
            background: rgba(197, 113, 84, 0.9);
            -webkit-transform: rotateX(90deg) translateZ(100px);
            -moz-transform: rotateX(90deg) translateZ(100px);
            -ms-transform: rotateX(90deg) translateZ(100px);
            -o-transform: rotateX(90deg) translateZ(100px);
            transform: rotateX(90deg) translateZ(100px);
        }

        li:nth-child(6) {
            background: rgba(219, 184, 143, 0.9);
            -webkit-transform: rotateX(-90deg) translateZ(100px);
            -moz-transform: rotateX(-90deg) translateZ(100px);
            -ms-transform: rotateX(-90deg) translateZ(100px);
            -o-transform: rotateX(-90deg) translateZ(100px);
            transform: rotateX(-90deg) translateZ(100px);
        }
    </style>
</head>
<body>
    <ul id="box">
        <li>蘋果X</li>
        <li>OPPO R11s</li>
        <li>小米7</li>
        <li>謝謝參與</li>
        <li>VIVO X9</li>
        <li>蘋果8</li>
    </ul>
    <script>
        window.onload = function(){
            wrap.style.cssText = "transform: rotateX(360deg) rotateY(360deg);transition: 1s ease-out;"
        }

        var wrap = document.getElementById('box');
        var degArr = [-360,-270,-180,-90,0,90,180,270,360]; //各個面對應角度
        
        wrap.onclick = function(){
            var round = 4 + Math.floor(Math.random()*9);    //旋轉圈數
            var randX = Math.floor(Math.random()*9);  //隨機X
            var randY = Math.floor(Math.random()*9);   //隨機Y
            var degX = round*360+degArr[randX];
            var degY = round*360+degArr[randY];
            wrap.style.cssText = "transform: rotateX("+degX+"deg) rotateY("+degY+"deg)";
        }

    </script>
</body>
</html>

如有錯誤，請聯繫指正，非常感謝！！！

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

-Advertisement-

更多相關文章

JavaScript變數提升的理解

變數提升先說三句總結性的話： let 的「創建」過程被提升了，但是初始化沒有提升。 var 的「創建」和「初始化」都被提升了。 function 的「創建」「初始化」和「賦值」都被提升了。所以，我們要註意，這三種變數提升，含義是不同的。變數提升的規律在進入一個執行上下文後，先把 var 和 ...
變數提升和函數提升的意義

先舉個例子：結果：結果：原因：解析器在向執行環境中夾在數據時，對函數聲明和函數表達式並非一視同仁。解析器會率先讀取函數聲明，並使其在執行任何代碼之前可用（可以訪問）。說白了就是，用函數聲明形式定義的函數支持變數提升，而函數表達式形式的不行。個人理解：如果能夠變數提升，先用了再說，然後 ...
Vue指令常見的幾個內置指令

1、v-if指令:判斷指令，根據表達式值得真假來插入或刪除相應的值。 2、v-show指令:條件渲染指令，無論返回的布爾值是true還是false，元素都會存在在html中，只是false的元素會隱藏在html中，並不會刪除. 3、v-else指令:配合v-if或v-else使用。 4、v-for指 ...
ajax跨域傳formdata

通過ajax傳輸，跨域不能使用 dataType: 'jsonp'，不然後端無法獲取文件，用 jsonp: 'callback' ...
angularJS解決數據顯示閃一下的問題？-解決辦法

轉自：https://www.cnblogs.com/e0yu/p/7219930.html?utm_source=itdadao&utm_medium=referral#undefined 使用 angular JS 的時候，把 angularJS 放到文件底部，在渲染頁面的時候，會出現閃一下的情 ...
echarts3 遷徙圖遷入遷出

geoCoordMap = { '上海': [121.4648,31.2891], '佛山': [112.8955,23.1097], '保定': [115.0488,39.0948], '蘭州': [103.5901,36.3043], '包頭': [110.3467,41.4899], '北京'... ...
如何讓gitbook與github倉庫關聯

一、賬號註冊分別https://www.gitbook.com和https://github.com/註冊賬號。二、github上新建一個倉庫如 https://github.com/wjf444128852/blog 1、gitbook內新建一本書籍， 2、模板選項中選擇GITHUB,如下圖 ...
《javascript 學習筆記》

註釋 1. // This is an in-line comment. 2. /* This is a multi-line comment */ 七種data types(數據類型) undefined（未定義）, null（空）, boolean（布爾型）, string（字元串）, symb ...