代碼：

 !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;}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( 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); //隨機Xvar randY = Math.floor(Math.random()*9); //隨機Yvar 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骰子抽獎源碼的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。