代码:
!DOCTYPE html html head meta charset= UTF-8 meta http-equiv= X-UA-Compatible content= ie=edge title PHP --骰子源码 /title style html,body,ul {margin: 0;padding: 0;}body {perspective: 2000px;overflow: hidden;text-align: center;}position: relative;width: 200px;height: 200px;margin: 70px auto 60px auto;-webkit-transition: preserve-3d;-moz-transition: preserve-3d;-ms-transition: preserve-3d;transition: 2s 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;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); .btn{ width: 100px; height: 50px; line-height: 50px; color: #fff; background: #666; border-radius: 5px; border: none; outline: none; margin: 0 10px; cursor: pointer; /style /head body ul id= box li 1 /li li 2 /li li 3 /li li 4 /li li 5 /li li 6 /li /ul button id= rightBtn 向右展开详情 /button button id= leftBtn 向左展开详情 /button button id= topBtn 向上展开详情 /button button id= downBtn 向下展开详情 /button script var box = document.getElementById( box var degX = 0; var degY = 0;document.getElementById( rightBtn ).onclick = function(){ degY += 90;box.style.cssText = transform: rotateY( +degY+ deg) document.getElementById( leftBtn ).onclick = function(){degY -= 90;box.style.cssText = transform: rotateY( +degY+ deg) document.getElementById( topBtn ).onclick = function(){degX += 90;box.style.cssText = transform: rotateX( +degX+ deg) document.getElementById( downBtn ).onclick = function(){degX -= 90;box.style.cssText = transform: rotateX( +degX+ deg) /script /body /html
免费拿去研究吧!更多好的源码尽在PHP ,关注我们给你好看~
相关推荐:
html会动的小狗狗源码
js原声实现简单的微信聊天功能
Java身份证号码验证的源码分享
以上就是css,js实现听话的骰子源码的详细内容,html教程
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。
新闻热点
疑难解答