首页 > 代码库 > 投骰子
投骰子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>骰子</title> <style type="text/css"> .sbing{ -webkit-perspective: 800; -webkit-perspective: 50% 50%;} #cube{ -webkit-transform-style: preserve-3d; position: relative; width: 200px; height:200px; margin: 100px auto; } .page{ position: absolute; width: 160px; line-height: 160px; text-align: center; font-size: 200px; color: #ff0; padding: 20px; background: #00f;} #page1{ background: #ddbdff; } #page2{ background: #bc1339; -webkit-transform-origin: left; -webkit-transform: rotateY(90deg);} #page3{ background: #a369af; -webkit-transform-origin: right; -webkit-transform: rotateY(-90deg); } #page4{ background: #032149; -webkit-transform-origin: top; -webkit-transform: rotateX(-90deg); } #page5{ -webkit-transform-origin: bottom; -webkit-transform: rotateX(90deg); } #page6{ background: #838b75; -webkit-transform: translateZ(-200px); } .operation{ width: 800px; margin: 30px auto; } .operation .centeral{ width: 720px; } button{ display: block; width: 100px; height: 60px; text-align: center; font-size: 16px; margin: 20px auto; } </style> <script type="text/javascript"> window.onload = function(){ var cube = document.getElementById("cube"); var btn = document.getElementById("btn"); var reset = document.getElementById("reset"); var z = Math.random()*4020; var x = Math.random()*4020; var y = Math.random()*4020; btn.onclick = function(){ cube.style.webkitTransform = "rotateX("+x+"deg) rotateY("+y+"deg) rotateZ("+z+"deg)" cube.style.webkitTransition = "-webkit-transform 7s ease"; } reset.onclick = function(){ cube.style.webkitTransform = "rotateX("+0+"deg) rotateY("+0+"deg) rotateZ("+0+"deg)" cube.style.webkitTransition = "none"; } } </script></head><body><div class="sbing"> <div id="cube"> <div class="page" id="page1">1</div> <div class="page" id="page2">2</div> <div class="page" id="page3">3</div> <div class="page" id="page4">4</div> <div class="page" id="page5">5</div> <div class="page" id="page6">6</div> </div></div><button id="btn">点击旋转</button><button id="reset">点击复位</button></body></html>
投骰子
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。