首頁 > 文章 > web前端 > css，js骰子抽獎源碼

css，js骰子抽獎源碼

韦小宝原創: 2017-11-17 14:10:242321瀏覽

本原始碼是根據之前發布的聽話的骰子基礎上再做升級的，免費提供源碼，拿去學習吧！常來我們的PHP中文網即可喔~

css，js骰子抽獎源碼

#代碼：

<!DOCTYPE html>
<html>

<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>PHP中文网--骰子抽奖</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>IPhone</li>
<li>Sugar</li>
<li>Bill</li>
<li>Thanks</li>
<li>XBox</li>
<li>Doll</li>
</ul>
<script>
window.onload = function(){
wrap.style.cssText = "transform: rotateX(360deg) rotateY(360deg);transition: 1s ease-out;"
}

var wrap = document.getElementById(&#39;box&#39;);
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>

免費拿去研究吧！更多好的源碼盡在PHP中文網，關注我們給你好看哦~

相關推薦：

html會動的小狗狗原始碼

css，js實作聽話的骰子原始碼

js原聲實作簡單的微信聊天功能

以上是css，js骰子抽獎源碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css，js實作聽話的骰子源碼下一篇：css，js實作聽話的骰子源碼

看更多