Home > Article > Web Front-end > css, js implement obedient dice source code

css, js implement obedient dice source code

韦小宝Original: 2017-11-17 13:45:433451browse

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

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js original sound to implement simple WeChat chat functionNext article：js original sound to implement simple WeChat chat function

See more

css, js implement obedient dice source code

Related articles