首页 >web前端 >html教程 >css，js实现听话的骰子源码

css，js实现听话的骰子源码

韦小宝原创: 2017-11-17 13:45:433481浏览

又是一波福利！css和js实现的一个听话的骰子，拿去研究吧，不要钱！

88FV596HWWW{H8O@4@DN333.png

代码：

<!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;}
ul {
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(&#39;box&#39;);
        var degX = 0;
        var degY = 0;

document.getElementById(&#39;rightBtn&#39;).onclick = function(){
            degY += 90;
box.style.cssText = "transform: rotateY("+degY+"deg)";
        }
        
        document.getElementById(&#39;leftBtn&#39;).onclick = function(){
degY -= 90;
box.style.cssText = "transform: rotateY("+degY+"deg)";
        }
        
        document.getElementById(&#39;topBtn&#39;).onclick = function(){
degX += 90;
box.style.cssText = "transform: rotateX("+degX+"deg)";
        }
        
        document.getElementById(&#39;downBtn&#39;).onclick = function(){
degX -= 90;
box.style.cssText = "transform: rotateX("+degX+"deg)";
}

</script>
</body>

</html>

免费拿去研究吧！更多好的源码尽在PHP中文网，关注我们给你好看~

相关推荐：

html会动的小狗狗源码

js原声实现简单的微信聊天功能

Java身份证号码验证的源码分享

以上是css，js实现听话的骰子源码的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：js原声实现简单的微信聊天功能下一篇：css，js骰子抽奖源码

查看更多