我正在使用SVG创建社交太阳系，您可以查看demo。这是SVG代码：
<svg width="1384px" height="1384px" viewBox="0 0 1384 1384" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>solar-system</title>
<description>Created with Sketch (http://www.bohemiancoding.com/sketch)</description>
<defs>
<circle id="path-1" cx="17" cy="17" r="17"></circle>
<circle id="path-3" cx="28.5" cy="28.5" r="28.5"></circle>
<circle id="path-5" cx="21" cy="21" r="21"></circle>
<path id="path-7" d="M24,48 C37.2548347,48 48,37.2548347 48,24 C48,10.7451653 37.2548347,0 24,0 C10.7451653,0 0,10.7451653 0,24 C0,37.2548347 10.7451653,48 24,48 Z"></path>
<path id="path-9" d="M24,48 C37.2548347,48 48,37.2548347 48,24 C48,10.7451653 37.2548347,0 24,0 C10.7451653,0 0,10.7451653 0,24 C0,37.2548347 10.7451653,48 24,48 Z"></path>
<path id="path-11" d="M24,48 C37.2548347,48 48,37.2548347 48,24 C48,10.7451653 37.2548347,0 24,0 C10.7451653,0 0,10.7451653 0,24 C0,37.2548347 10.7451653,48 24,48 Z"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="ss-orbits" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)" stroke="#FFFFFF">
<g id="ss-orbits-solid" stroke-opacity="0.0730698529" stroke-width="3" sketch:type="MSShapeGroup">
<path d="M690,862 C784.992982,862 862,784.992982 862,690 C862,595.007018 784.992982,518 690,518 C595.007018,518 518,595.007018 518,690 C518,784.992982 595.007018,862 690,862 Z" id="ss-orbits-solid-twitter"></path>
<path d="M690.5,992 C857.01386,992 992,857.01386 992,690.5 C992,523.98614 857.01386,389 690.5,389 C523.98614,389 389,523.98614 389,690.5 C389,857.01386 523.98614,992 690.5,992 Z" id="ss-orbits-solid-facebook"></path>
<path d="M689.5,1076 C902.958066,1076 1076,902.958066 1076,689.5 C1076,476.041934 902.958066,303 689.5,303 C476.041934,303 303,476.041934 303,689.5 C303,902.958066 476.041934,1076 689.5,1076 Z" id="ss-orbits-solid-soundcloud"></path>
<path d="M689,1135 C934.766726,1135 1134,935.766726 1134,690 C1134,444.233274 934.766726,245 689,245 C443.233274,245 244,444.233274 244,690 C244,935.766726 443.233274,1135 689,1135 Z" id="ss-orbits-solid-vimeo"></path>
<path d="M690,1250 C999.279475,1250 1250,999.279475 1250,690 C1250,380.720525 999.279475,130 690,130 C380.720525,130 130,380.720525 130,690 C130,999.279475 380.720525,1250 690,1250 Z" id="ss-orbits-solid-youtube"></path>
<path d="M690,1380 C1071.0765,1380 1380,1071.0765 1380,690 C1380,308.923504 1071.0765,0 690,0 C308.923504,0 0,308.923504 0,690 C0,1071.0765 308.923504,1380 690,1380 Z" id="ss-orbits-solid-instagram"></path>
</g>
<g id="ss-orbits-dotted" stroke-dasharray="1,10" sketch:type="MSShapeGroup">
<path d="M690,862 C784.992982,862 862,784.992982 862,690 C862,595.007018 784.992982,518 690,518 C595.007018,518 518,595.007018 518,690 C518,784.992982 595.007018,862 690,862 Z" id="ss-orbits-dotted-twitter"></path>
<path d="M690.5,992 C857.01386,992 992,857.01386 992,690.5 C992,523.98614 857.01386,389 690.5,389 C523.98614,389 389,523.98614 389,690.5 C389,857.01386 523.98614,992 690.5,992 Z" id="ss-orbits-dotted-facebook"></path>
<path d="M689.5,1076 C902.958066,1076 1076,902.958066 1076,689.5 C1076,476.041934 902.958066,303 689.5,303 C476.041934,303 303,476.041934 303,689.5 C303,902.958066 476.041934,1076 689.5,1076 Z" id="ss-orbits-dotted-soundcloud"></path>
<path d="M689,1135 C934.766726,1135 1134,935.766726 1134,690 C1134,444.233274 934.766726,245 689,245 C443.233274,245 244,444.233274 244,690 C244,935.766726 443.233274,1135 689,1135 Z" id="ss-orbits-dotted-vimeo"></path>
<path d="M690,1250 C999.279475,1250 1250,999.279475 1250,690 C1250,380.720525 999.279475,130 690,130 C380.720525,130 130,380.720525 130,690 C130,999.279475 380.720525,1250 690,1250 Z" id="ss-orbits-dotted-youtube"></path>
<path d="M690,1380 C1071.0765,1380 1380,1071.0765 1380,690 C1380,308.923504 1071.0765,0 690,0 C308.923504,0 0,308.923504 0,690 C0,1071.0765 308.923504,1380 690,1380 Z" id="ss-orbits-dotted-instagram"></path>
</g>
</g>
<g id="ss-networks" sketch:type="MSLayerGroup" transform="translate(131.000000, 339.000000)">
<g id="ss-network-twitter" transform="translate(467.000000, 181.000000)">
<mask id="mask-2" sketch:name="ss-network-twitter-bg" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="ss-network-twitter-bg" fill="#00ACED" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
<path d="M29,11.1305134 C28.1540577,11.4918285 27.2441486,11.7361661 26.2896784,11.8462219 C27.2635543,11.2834839 28.0117496,10.3933474 28.3646449,9.3322438 C27.4525796,9.85275908 26.4427674,10.2313786 25.3682697,10.4348779 C24.5072341,9.55166314 23.281085,9 21.9241274,9 C19.3180213,9 17.2056811,11.0343011 17.2056811,13.5441261 C17.2056811,13.900596 17.2473673,14.2473755 17.3278648,14.5796193 C13.4064873,14.3899635 9.92928346,12.5806191 7.60204369,9.83130167 C7.19596263,10.502711 6.9630949,11.2827918 6.9630949,12.11617 C6.9630949,13.6929437 7.79610012,15.0835224 9.06249805,15.8989041 C8.28914721,15.8753701 7.56179494,15.6711786 6.92500234,15.3306287 C6.92428362,15.3493174 6.92428362,15.3686983 6.92428362,15.3880792 C6.92428362,17.5898866 8.55076404,19.4262257 10.7091028,19.843607 C10.313084,19.9474332 9.89622199,20.0028072 9.4657042,20.0028072 C9.16168245,20.0028072 8.86628543,19.974428 8.57807569,19.9211306 C9.17821318,21.7263219 10.9211275,23.0400692 12.9860317,23.0767545 C11.3710509,24.2956739 9.33633324,25.021765 7.12552733,25.021765 C6.74460173,25.021765 6.36942596,25.0003076 6,24.958085 C8.0879035,26.2476062 10.5682322,27 13.233274,27 C21.9126277,27 26.6583857,20.0754855 26.6583857,14.0701788 C26.6583857,13.8729091 26.6540733,13.6770236 26.6447299,13.4825226 C27.5668573,12.8415689 28.366801,12.0414151 28.9992813,11.1305134 L29,11.1305134 Z" id="ss-network-twitter-logo" fill="#FFFFFF" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
</g>
<g id="ss-network-facebook" transform="translate(240.000000, 400.000000)">
<mask id="mask-4" sketch:name="ss-network-facebook-bg" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="ss-network-facebook-bg" fill="#3B5998" sketch:type="MSShapeGroup" xlink:href="#path-3"></use>
<path d="M32.37332,63 L23.1517887,63 L23.1517887,38.5 L17,38.5 L17,30.0566875 L23.1517887,30.053625 L23.1410231,25.080125 C23.1410231,18.1925625 25.0173186,14 33.1669007,14 L39.9523236,14 L39.9523236,22.4448437 L35.7122033,22.4448437 C32.5378803,22.4448437 32.3856235,23.6254375 32.3856235,25.827375 L32.37332,30.053625 L40,30.053625 L39.1018388,38.4969375 L32.3810097,38.5 L32.3748579,63 L32.37332,63 Z" id="ss-network-facebook-logo" fill="#FFFFFF" sketch:type="MSShapeGroup" mask="url(#mask-4)"></path>
</g>
<g id="ss-network-soundcloud" transform="translate(925.000000, 370.000000)">
<mask id="mask-6" sketch:name="ss-network-soundcloud-bg" fill="white">
<use xlink:href="#path-5"></use>
</mask>
<use id="ss-network-soundcloud-bg" fill="#FF631C" sketch:type="MSShapeGroup" xlink:href="#path-5"></use>
<path d="M29.874,19.069 C29.309,19.069 28.769,19.179 28.278,19.377 C27.95,15.803 24.831,13 21.028,13 C20.097,13 19.194,13.176 18.393,13.474 C18.082,13.59 18,13.709 18,13.94 L18,26.525 C18,26.768 18.195,26.97 18.441,26.994 C18.452,26.995 29.801,27.001 29.875,27.001 C32.153,27.001 34,25.225 34,23.036 C34,20.847 32.152,19.07 29.874,19.07 L29.874,19.069 Z M14.5,27 L15.5,27 L16,19.993 L15.5,13 L14.5,13 L14,19.993 L14.5,27 Z M11.5,27 L10.5,27 L10,21.914 L10.5,17 L11.5,17 L12,22 L11.5,27 Z M6.5,27 L7.5,27 L8,23 L7.5,19 L6.5,19 L6,23 L6.5,27 Z M2.5,25 L3.5,25 L4,23 L3.5,21 L2.5,21 L2,23 L2.5,25 Z" id="ss-network-soundcloud-logo" fill="#FFFFFF" sketch:type="MSShapeGroup" mask="url(#mask-6)"></path>
</g>
<g id="ss-network-vimeo" transform="translate(135.000000, 523.000000)">
<mask id="mask-8" sketch:name="ss-network-vimeo-bg" fill="white">
<use xlink:href="#path-7"></use>
</mask>
<use id="ss-network-vimeo-bg" fill="#1BB7EA" sketch:type="MSShapeGroup" xlink:href="#path-7"></use>
<path d="M10.1781153,21.3280283 C10.1781153,21.3280283 12.6068454,19.4360308 13.4170263,20.3824773 C14.2263009,21.3280283 17.3174943,32.7489602 18.3497046,34.8558557 C19.2505097,36.7030829 21.7345206,39.1457565 24.4586858,37.4015013 C27.1810385,35.6572461 36.235308,28.019414 37.8556698,19.0008624 C39.4751252,9.98410159 26.9599153,11.8734129 25.6349887,19.7288293 C28.9482115,17.7634082 30.7162908,20.5275334 29.0216172,23.6569851 C27.3296623,26.7828552 25.7827062,28.8225952 24.9734316,28.8225952 C24.1650632,28.8225952 23.5433808,26.7300261 22.6172009,23.0740744 C21.6602087,19.2936609 21.6656462,12.4840813 17.6863351,13.2559232 C13.9335846,13.9838901 9.00090624,19.8031481 9.00090624,19.8031481 L10.1781153,21.3280283 Z" id="ss-network-vimeo-logo" fill="#FFFFFF" sketch:type="MSShapeGroup" mask="url(#mask-8)"></path>
</g>
<g id="ss-network-youtube" transform="translate(0.000000, 167.000000)">
<mask id="mask-10" sketch:name="ss-network-youtube-bg" fill="white">
<use xlink:href="#path-9"></use>
</mask>
<use id="ss-network-youtube-bg" fill="#E14D40" sketch:type="MSShapeGroup" xlink:href="#path-9"></use>
<path d="M32.5625,13 L14.4375,13 C11.446875,13 9,15.475 9,18.5 L9,29.5 C9,32.525 11.446875,35 14.4375,35 L32.5625,35 C35.553125,35 38,32.525 38,29.5 L38,18.5 C38,15.475 35.553125,13 32.5625,13 L32.5625,13 Z M20,32 L20,17 L29,24.5 L20,32 L20,32 Z" id="ss-network-youtube-logo" fill="#FFFFFF" sketch:type="MSShapeGroup" mask="url(#mask-10)"></path>
</g>
<g id="ss-network-instagram" transform="translate(1142.000000, 0.000000)">
<mask id="mask-12" sketch:name="ss-network-instagram-bg" fill="white">
<use xlink:href="#path-11"></use>
</mask>
<use id="ss-network-instagram-bg" fill="#2C6E8E" sketch:type="MSShapeGroup" xlink:href="#path-11"></use>
<path d="M32.6833224,11 L15.3166776,11 C12.9426268,11 11,12.9426268 11,15.3166776 L11,32.6833224 C11,35.0573732 12.9426268,37 15.3166776,37 L32.6833224,37 C35.0573732,37 37,35.0573732 37,32.6833224 L37,15.3166776 C37,12.9426268 35.0573732,11 32.6833224,11 L32.6833224,11 Z M19.277322,22 L28.7234985,22 C28.902363,22.5422535 29,23.1242896 29,23.7296763 C29,26.6355325 26.75681,29 24,29 C21.24319,29 19,26.6355325 19,23.7296763 C19,23.1242896 19.097637,22.5422535 19.277322,22 L19.277322,22 Z M34,22.0015714 L34,31.4285714 C34,32.2928571 33.25,33 32.3333333,33 L15.6666667,33 C14.75,33 14,32.2928571 14,31.4285714 L14,22 L16.6066667,22 C16.4858333,22.506 16.4216667,23.0316429 16.4216667,23.5714286 C16.4216667,27.511 19.8208333,30.7167143 24,30.7167143 C28.1783333,30.7167143 31.5783333,27.5117857 31.5783333,23.5714286 C31.5783333,23.0316429 31.5141667,22.506 31.3933333,22 L34,22.0015714 L34,22.0015714 Z M34,16.25 C34,16.6625 33.6625,17 33.25,17 L31.75,17 C31.3375,17 31,16.6625 31,16.25 L31,14.75 C31,14.3375 31.3375,14 31.75,14 L33.25,14 C33.6625,14 34,14.3375 34,14.75 L34,16.25 L34,16.25 Z" id="ss-network-instagram-logo" fill="#FFFFFF" sketch:type="MSShapeGroup" mask="url(#mask-12)"></path>
</g>
</g>
</g>
</svg>
和CSS：
body {
padding: 30px;
background-color: #222;
}
#ss-network-twitter {
-webkit-animation: spin 3s linear infinite;
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
我试图让Twitter图标旋转到位，但它改变了它的位置（尝试删除animation属性以查看我的意思）并围绕不同的轴旋转。
为什么Twitter图标不会旋转？
答案 0 :(得分：0)
我认为“摆动”可能是由元素上已经存在的变换引起的：transform =“translate（467.000000，181.000000）抱歉，我无法进一步帮助，因为我没有使用CSS制作动画。我用过javascript。祝你好运。