css, js dice lottery source code-HTML Tutorial-php.cn

css, js dice lottery source code

韦小宝

Release： 2017-11-17 14:10:24

Original

2315 people have browsed it

This source code is an upgrade based on the previously released obedient dice. The source code is provided for free, take it and learn! Just come to our PHP Chinese website~

css, js dice lottery source code

Code:

<!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>

Copy after login

Get it for free Study it! More good source codes are available on PHP Chinese website, follow us and give you a good look~

Related recommendations:

html moving puppy source code

css, js source code for obedient dice

js original sound to implement simple WeChat chat function

The above is the detailed content of css, js dice lottery source code. For more information, please follow other related articles on the PHP Chinese website!