立体骰子（css3和js）

Posted 2020-09-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了立体骰子（css3和js）相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src=‘jquery-3.0.0.min.js‘></script>
    <style>
        body{
            perspective: 500px;
            background-color: skyblue;
        }
        #demo {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            position: relative;
            transform-style: preserve-3d;
            transition: all 5s;
        }
        #demo .item{
            width: 100%;
            height: 100%;
            list-style: none;
            position: absolute;
            padding: 0;
            margin: 0;
            display: flex;
            border-radius: 30px;
            background-color: whitesmoke;
        }
        li{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: red;
            margin: 5px;
        }
        .item:nth-child(1){
            align-items: center;
            justify-content: center;
            transform: rotateY(0deg) translateZ(100px);
        }
        .item:nth-child(1) li{
            width: 50px;
            height: 50px;
        }
        .item:nth-child(2){
            justify-content: space-between;
            transform: rotateY(180deg) translateZ(100px);
        }
        .item:nth-child(2) li{
            width: 40px;
            height: 40px;
        }
        .item:nth-child(2) li:nth-child(2){
            align-self: flex-end;
        }
        .item:nth-child(3){
            justify-content: space-between;
            transform: rotateY(90deg) translateZ(100px);
        }
        .item:nth-child(3) li{
            width: 35px;
            height: 35px;
        }
        .item:nth-child(3) li:nth-child(3){
            align-self: flex-end;
        }
        .item:nth-child(3) li:nth-child(2){
            align-self: center;
            justify-content: center;
        }
        .item:nth-child(4) {
            justify-content: space-between;
            flex-wrap: wrap;
            align-content: space-between;
            transform: rotateY(-90deg) translateZ(100px);
        }
        .item:nth-child(4) li{
            width: 35px;
            height: 35px;
            margin: 20px;
        }
        .item:nth-child(5){
            justify-content: space-between;
            flex-wrap: wrap;
            align-content: space-between;
            transform: rotateX(90deg) translateZ(100px);
        }
        .item:nth-child(5) li{
            margin: 8px 15px;
        }
        .item:nth-child(5) li:nth-child(2){
            margin-top: 85px;
        }
        .item:nth-child(6){
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: space-between;
            align-content: space-between;
            transform: rotateX(-90deg) translateZ(100px);
        }
        .item:nth-child(6) li{
            margin: 18px 20px;
        }
        input{
            display: block;
            width: 50px;
            height: 40px;
            margin: 0 auto;
        }
    </style>
    <script>
        $(function () {
            $("#btn").click(function () {
                var x = parseInt(Math.random()*3600);
                var y = parseInt(Math.random()*3600);
                $("#demo").css({ transform:‘rotateX(‘+x+‘deg) rotateY(‘+y+‘deg)‘})
            })
        })
    </script>
</head>
<body>
<div id="demo">
    <ul class="item">
        <li></li>
    </ul>
    <ul class="item">
        <li></li>
        <li></li>
    </ul>
    <ul class="item">
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="item">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="item">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul class="item">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<input type="button" id="btn" value="开始"/>
</body>
</html>

以上是关于立体骰子（css3和js）的主要内容，如果未能解决你的问题，请参考以下文章

CSS3画一个滚动的骰子

2.旋转的骰子

CSS3--Flex弹性盒子布局: 实例篇-骰子布局

CSS3立体文字最佳实践

如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

CSS3动画结合js实现3D轮播