用css3实现一个星球节点旋转效果图

点击查看效果图

本来看到这个需求我还在想自己造轮子，第一个方案就是用css3的transform实现，后来因为自己实在太弱了，做不出来，没办法，还是去找大佬的轮子~
等后面有机会了再试试能不能自己写出来~

这个效果使用了jquery-svg3dtagcloud-plugin 插件
源码直接放在下面了，如果需要可以直接复制修改

<!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>用css3实现一个星球节点旋转效果图</title>
    </head>
    <body>
        <div id="holder"></div>

        <!-- 这里可以配合jquery使用，也可以不用jquery独立使用 -->
        <!-- <script src="../common/jquery-1.12.4.min.js"></script> -->
        <script src="./jquery.svg3dtagcloud.min.js"></script>
        <script>
            // 设置要显示的条目
            let entries = [
                { label: '中国', url: '/mypage/用css3实现一个星球节点旋转效果图' },
                { label: '美国', url: '/mypage/用css3实现一个星球节点旋转效果图' },
                { label: '加拿大', url: '/mypage/用css3实现一个星球节点旋转效果图' },
                { label: '日本', url: '/mypage/用css3实现一个星球节点旋转效果图' },
                { label: '墨西哥', url: '/mypage/用css3实现一个星球节点旋转效果图' },
                { label: '英国', url: '/mypage/用css3实现一个星球节点旋转效果图' },
                { label: '法国', url: '/mypage/用css3实现一个星球节点旋转效果图' },
                { label: '德国', url: '/mypage/用css3实现一个星球节点旋转效果图' },
                { label: '西班牙', url: '/mypage/用css3实现一个星球节点旋转效果图' },
                { label: '古巴', url: '/mypage/用css3实现一个星球节点旋转效果图' },
                { label: '利比亚', url: '/mypage/用css3实现一个星球节点旋转效果图' },
                { label: '韩国', url: '/mypage/用css3实现一个星球节点旋转效果图' },
                { label: '俄罗斯', url: '/mypage/用css3实现一个星球节点旋转效果图' },
            ]

            // 设置参数
            let settings = {
                entries,
                width: 480,
                height: 480,
                radius: '65%',
                radiusMin: 75,
                bgDraw: true,
                bgColor: 'white',
                opacityOver: 1.00,
                opacityOut: 0.05,
                opacitySpeed: 6,
                fov: 800,
                speed: 2,
                fontFamily: 'Oswald, Arial, sans-serif',
                fontSize: '15',
                fontColor: '#333',
                fontWeight: 'normal',//bold
                fontStyle: 'normal',//italic 
                fontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
                fontToUpperCase: true,
                tooltipFontFamily: 'Oswald, Arial, sans-serif',
                tooltipFontSize: '11',
                tooltipFontColor: '#fff',
                tooltipFontWeight: 'normal',//bold
                tooltipFontStyle: 'normal',//italic 
                tooltipFontStretch: 'normal',//wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
                tooltipFontToUpperCase: false,
                tooltipTextAnchor: 'left',
                tooltipDiffX: 0,
                tooltipDiffY: 10,
                animatingSpeed: 0.01,
                animatingRadiusLimit: 1.3
            };

            // 这里可以配合jquery使用，也可以不用jquery独立使用
            // $( '#holder' ).svg3DTagCloud( settings );
            var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder'  ), settings );
        </script>
    </body>
</html>