利用js实现matrix3d绕球旋转效果

白桃苏打水

已于 2022-12-01 11:23:22 修改

阅读量1.4k

点赞数

文章标签： javascript 3d css

于 2022-11-24 13:32:10 首次发布

本文链接：https://blog.csdn.net/bestier/article/details/128016624

版权

要实现的效果

小球围成一圈，绕中心轴旋转
一圈小球绕中心的div旋转

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .middle {
     
            position: relative;
            height:350px;
            width: 150px;
            background-color: rgba(187, 235, 219, .5);
            margin: 100px 400px;
        }

        .iconbg {
     
            position: absolute;
            top: 100px;
            width: 88px;
            height: 88px;
            line-height: 88px;
            border-radius: 50%;
            background-color: brown;
            text-align: center;
        }

        .rotate1 {
     
            animation: rotate1 20s linear infinite;
        }

        .rotate2 {
     
            animation: rotate2 20s linear infinite;
        }

        .rotate3 {
     
            animation: rotate3 20s linear infinite;
        }

        .rotate4 {
     
            animation: rotate4 20s linear infinite;
        }

        .rotate5 {
     
            animation: rotate5 20s linear infinite;
        }

        .rotate6 {
     
            animation: rotate6 20s linear infinite;
        }
    </style>
</head>

<body>
    <div class="middle">
        <div style="width: 100%;height: 300px;position: relative;">
            <div class="iconbg rotate1 rotateball">
                <div class="iconper">19%</div>
                <div class="icontext">数据展示1</div>
            </div>
            <div class="iconbg rotate2 rotateball">
                <div class="iconper">29%</div>
                <div class="icontext">数据展示2</div>
            </div>
            <div class="iconbg rotate3 rotateball">
                <div class="iconper">39%</div>
                <div class="icontext">数据展示3</div>
            </div>
            <div class="iconbg rotate4 rotateball">
                <div class="iconper">49%</div>
                <div class="icontext">数据展示4</div>
            </div>
            <div class="iconbg rotate5 rotateball">
                <div class="iconper">59%</div>
                <div class="icontext">数据展示5</div>
            </div>
            <div class="iconbg rotate6 rotateball">
                <div class="iconper">69%</div>
                <div class="icontext">数据展示6</div>
            </div>
        </div>
    </div>
    <script>
        // 球的运动数据
        var option_data = [
            {
      'id': '0%', 'data': '0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 1, 0, 270, 0, 0, 1', 'zindex': 100 },
            {
      'id': '1%', 'data': '0.92093, 0, 0, 0, 0, 0.92093, 0, 0, 0, 0, 1, 0, 269.46722, 6.27905, 0, 1', 'zindex': 100.06279 },
            {
      'id': '2%', 'data': '0.94178, 0, 0, 0, 0, 0.94178, 0, 0, 0, 0, 1, 0, 267.87097, 12.53332, 0, 1', 'zindex': 100.12533 },
            {
      'id': '3%', 'data': '0.96246, 0, 0, 0, 0, 0.96246, 0, 0, 0, 0, 1, 0, 265.21756, 18.73813, 0, 1', 'zindex': 100.18738 },
            {
      'id': '4%', 'data': '0.9829, 0, 0, 0, 0, 0.9829, 0, 0, 0, 0, 1, 0, 261.51745, 24.86899, 0, 1', 'zindex': 100.24869 },
            {
      'id': '5%', 'data': '1.00301, 0, 0, 0, 0, 1.00301, 0, 0, 0, 0, 1, 0, 256.78526, 30.9017, 0, 1', 'zindex': 100.30902 },
            {
      'id': '6%', 'data': '1.02271, 0, 0, 0, 0, 1.02271, 0, 0, 0, 0, 1, 0, 251.03965, 36.81246, 0, 1', 'zindex': 100.36812 },
            {
      'id': '7%', 'data': '1.04193, 0, 0, 0, 0, 1.04193, 0, 0, 0, 0, 1, 0, 244.3033, 42.57793, 0, 1', 'zindex': 100.42578 },
            {
      'id': '8%', 'data': '1.06058, 0, 0, 0, 0, 1.06058, 0, 0, 0, 0, 1, 0, 236.6028, 48.17537, 0, 1', 'zindex': 100.48175 },
            {
      'id': '9%', 'data': '1.07861, 0, 0, 0, 0, 1.07861, 0, 0, 0, 0, 1, 0, 227.96854, 53.58268, 0, 1', 'zindex': 100.53583 },
            {
      'id': '10%', 'data': '1.09593, 0, 0, 0, 0, 1.09593, 0, 0, 0, 0, 1, 0, 218.43459, 58.77853, 0, 1', 'zindex': 100.58779 },
            {
      'id': '11%', 'data': '1.11247, 0, 0, 0, 0, 1.11247, 0, 0, 0, 0, 1, 0, 208.03858, 63.7424, 0, 1', 'zindex': 100.63742 },
            {
      'id': '12%', 'data': '1.12818, 0, 0, 0, 0, 1.12818, 0, 0, 0, 0, 1, 0, 196.82153, 68.45471, 0, 1', 'zindex': 100.68455 },
            {
      'id': '13%', 'data': '1.14299, 0, 0, 0, 0, 1.14299, 0, 0, 0, 0, 1, 0, 184.82772, 72.89686, 0, 1', 'zindex': 100.72897 },
            {
      'id': '14%', 'data': '1.15684, 0, 0, 0, 0, 1.15684, 0, 0, 0, 0, 1, 0, 172.10448, 77.05132, 0, 1', 'zindex': 100.77051 },
            {
      'id': '15%', 'data': '1.16967, 0, 0, 0, 0, 1.16967, 0, 0, 0, 0, 1, 0, 158.70202, 80.9017, 0, 1', 'zindex': 100.80902 },
            {
      'id': '16%', 'data': '1.18144, 0, 0, 0, 0, 1.18144, 0, 0, 0, 0, 1, 0, 144.67323, 84.43279, 0, 1', 'zindex': 100.84433 },
            {
      'id': '17%', 'data': '1.1921, 0, 0, 0, 0, 1.1921, 0, 0, 0, 0, 1, 0, 130.07349, 87.63067, 0, 1', 'zindex': 100.87631 },
            {
      'id': '18%', 'data': '1.20161, 0, 0, 0, 0, 1.20161, 0, 0, 0, 0, 1, 0, 114.96041, 90.48271, 0, 1', 'zindex': 100.90483 },
            {
      'id': '19%', 'data': '1.20993, 0, 0, 0, 0, 1.20993, 0, 0, 0, 0, 1, 0, 99.39363, 92.97765, 0, 1', 'zindex': 100.92978 },
            {
      'id': '20%', 'data': '1.21702, 0, 0, 0, 0, 1.21702, 0, 0, 0, 0, 1, 0, 83.43459, 95.10565, 0, 1', 'zindex': 100.95106 },
            {
      'id': '21%', 'data': '1.22286, 0, 0, 0, 0, 1.22286, 0, 0, 0, 0, 1, 0, 67.14627, 96.85832, 0, 1', 'zindex': 100.96858 },
            {
      'id': '22%', 'data': '1.22743, 0, 0, 0, 0, 1.22743, 0, 0, 0, 0, 1, 0, 50.59295, 98.22873, 0, 1', 'zindex': 100.98229 },
            {
      'id': '23%', 'data': '1.2307, 0, 0, 0, 0, 1.2307, 0, 0, 0, 0, 1, 0, 33.83997, 99.21147, 0, 1', 'zindex': 100.99211 },
            {
      'id': '24%', 'data': '1.23268, 0, 0, 0, 0, 1.23268, 0, 0, 0, 0, 1, 0, 16.95344, 99.80267, 0, 1', 'zindex': 100.99803 },
            {
      'id': '25%', 'data': '1.23333, 0, 0, 0, 0, 1.23333, 0, 0, 0, 0, 1, 0, 0, 100, 0, 1', 'zindex': 101 },
            {
      'id': '26%', 'data': '1.23268, 0, 0, 0, 0, 1.23268, 0, 0, 0, 0, 1, 0, -16.95344, 99.80267, 0, 1', 'zindex': 100.99803 },
            {
      'id': '27%', 'data': '1.2307, 0, 0, 0, 0, 1.2307, 0, 0, 0, 0, 1, 0, -33.83997, 99.21147, 0, 1', 'zindex': 100.99211 },
            {
      'id': '28%', 'data': '1.22743, 0, 0, 0, 0, 1.22743, 0, 0, 0, 0, 1, 0, -50.59295, 98.22873, 0, 1', 'zindex': 100.98229 },
            {
      'id': '29%', 'data': '1.22286, 0, 0, 0, 0, 1.22286, 0, 0, 0, 0, 1, 0, -67.14627, 96.85832, 0, 1', 'zindex': 100.96858 },
            {
      'id': '30%', 'data': '1.21702, 0, 0, 0, 0, 1.21702, 0, 0, 0, 0, 1, 0, -83.43459, 95.10565, 0, 1', 'zindex': 100.95106 },
            {
      'id': '31%', 'data': '1.20993, 0, 0, 0, 0, 1.20993, 0, 0, 0, 0, 1, 0, -99.39363, 92.97765, 0, 1', 'zindex': 100.92978 },
            {
      'id': '32%', 'data': '1.20161, 0, 0, 0, 0, 1.20161, 0, 0, 0, 0, 1, 0, -114.96041, 90.48271, 0, 1', 'zindex': 100.90483 },
            {
      'id': '33%', 'data': '1.1921, 0, 0, 0, 0, 1.1921, 0, 0, 0, 0, 1, 0, -130.07349, 87.63067, 0, 1', 'zindex': 100.87631 },
            {
      'id': '34%', 'data': '1.18144, 0, 0, 0, 0, 1.18144, 0, 0, 0, 0, 1, 0, -144.67323, 84.43279, 0, 1', 'zindex': 100.84433 },
            {
      'id': '35%', 'data': '1.16967, 0, 0, 0, 0, 1.16967, 0, 0, 0, 0, 1, 0, -158.70202, 80.9017, 0, 1', 'zindex': 100.80902 },
            {
      'id': '36%', 'data': '1.15684, 0, 0, 0, 0, 1.15684, 0, 0, 0, 0, 1, 0, -172.10448, 77.05132, 0, 1', 'zindex': 100.77051 },
            {
      'id': '37%', 'data': '1.14299, 0, 0, 0, 0, 1.14299, 0, 0, 0, 0, 1, 0, -184.82772, 72.89686, 0, 1', 'zindex': 100.72897 },
            {
      'id': '38%', 'data': '1.12818, 0, 0, 0, 0, 1.12818, 0, 0, 0, 0, 1, 0, -196.82153, 68.45471, 0, 1', 'zindex': 100.68455 },
            {
      'id': '39%', 'data': '1.11247, 0, 0, 0, 0, 1.11247, 0, 0, 0, 0, 1, 0, -208.03858, 63.7424, 0, 1', 'zindex': 100.63742 },
            {
      'id': '40%', 'data': '1.09593, 0, 0, 0, 0, 1.09593, 0, 0, 0, 0, 1, 0, -218.43459, 58.77853, 0, 1', 'zindex': 100.58779 },
            {
      'id': '41%', 'data': '1.07861, 0, 0, 0, 0, 1.07861, 0, 0, 0, 0, 1, 0, -227.96854, 53.58268, 0, 1', 'zindex': 100.53583 },
            {
      'id': '42%', 'data': '1.06058, 0, 0, 0, 0, 1.06058, 0, 0, 0, 0, 1, 0, -236.6028, 48.17537, 0, 1', 'zindex': 100.48175 },
            {
      'id': '43%', 'data': '1.04193, 0, 0, 0, 0, 1.04193, 0, 0, 0, 0, 1, 0, -244.3033, 42.57793, 0, 1', 'zindex': 100.42578 },
            {
      'id': '44%', 'data': '1.02271, 0, 0, 0, 0, 1.02271, 0, 0, 0, 0, 1, 0, -251.03965, 36.81246, 0, 1', 'zindex': 100.36812 },
            {
      'id': '45%', 'data': '1.00301, 0, 0, 0, 0, 1.00301, 0, 0, 0, 0, 1, 0, -256.78526, 30.9017, 0, 1', 'zindex': 100.30902 },
            {
      'id': '46%', 'data': '0.9829, 0, 0, 0, 0, 0.9829, 0, 0, 0, 0, 1, 0, -261.51745, 24.86899, 0, 1', 'zindex': 100.24869 },
            {
      'id': '47%', 'data': '0.96246, 0, 0, 0, 0, 0.96246, 0, 0, 0, 0, 1, 0, -265.21756, 18.73813, 0, 1', 'zindex': 100.18738 },
            {
      'id': '48%', 'data': '0.94178, 0, 0, 0, 0, 0.94178, 0, 0, 0, 0, 1, 0, -267.87097, 12.53332, 0, 1', 'zindex': 100.12533 },
            {
      'id': '49%', 'data': '0.92093, 0, 0, 0, 0, 0.92093, 0, 0, 0, 0, 1, 0, -269.46722, 6.27905, 0, 1', 'zindex': 100.06279 },
            {
      'id': '50%', 'data': '0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 1, 0, -270, 0, 0, 1', 'zindex': 100 },
            {
      'id': '51%', 'data': '0.87907, 0, 0, 0, 0, 0.87907, 0, 0, 0, 0, 1, 0, -269.46722, -6.27905, 0, 1', 'zindex': 99.93721 },
            {
      'id': '52%', 'data'