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

css, js implement obedient dice source code

韦小宝

Release： 2017-11-17 13:45:43

Original

3494 people have browsed it

Another wave of benefits! An obedient dice implemented by css and js, go and study it, no money required!

css, js implement obedient dice source code

Code:

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

Copy after login

Get it for free and study it! More good source codes are available on the PHP Chinese website. Follow us to give you a good look~

Related recommendations:

HTML moving puppy source code

js original sound to implement simple WeChat chat function

Java ID number verification source code share

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