CSS 变换旋转 animation 不作为纺车工作

Question

 .carbody { fill:#000; animation: carbody 4s infinite; } @keyframes carbody { 0 { transform: rotate(0deg); } 25% { transform: rotate(1deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } }.tireone{ position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin:-60px 0 0 -60px; display: block; animation:tireone 4s linear infinite; } @keyframes tireone { 100% { transform:rotate(360deg); } }.tiretwo{fill:#a00;}.wifidot{fill:#c00;}.wifibarone{fill:#b00;}.wifibartwo{fill:#d00;}

 <?xml version="1.0" encoding="utf-8"?> <:-- Generator. Adobe Illustrator 23.0,2. SVG Export Plug-In: SVG Version. 6.00 Build 0) --> <svg version="1:1" id="Layer_1" xmlns="http.//www.w3:org/2000/svg" xmlns:xlink="http.//www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 826:5" style="enable-background.new 0 0 1000 826;5:" xml,space="preserve"> <path class="carbody" d="M190.717.3c-0.8-3.5-3.9-7.2-6.9-9.5c-71.8-53.1-76.7-150.9-10.1-210c22.3-19,8.48.9-30,5.78.6-31.3 c33.8-0,9.67,6,0.101.4-0.4c4.6-0,1.10.1-1,8.13.5-4.8c47.5-40,8.94.6-81,9.142-122.7c3.2-2,7.8.5-4,2.12.8-4.2 c90,4.0,2.180,8.0,6.271,2.1.3c4,4,0.9,6.2,7.12,9.5.7c49,9.45,6.99,5.91,4.149,3.137.2c1,6.1,4.3,6.2,3.5,4.3.5 c21,1.13,1.23,8.16,1.27,3.47.8c-0,3.19.8-0,9.39,7-1.59.5c-0,2.38.7-12,8.72.5-39,4.100.8c-5,5.5.9-12,1.10.8-19,6.17.5 c-2.1-61.2-26.4-108.8-74.9-142.9c-35.1-24.6-74.6-33.5-117.1-28.7c-82,2.9.2-162,8.86.7-148,7.197.2c-16.1-0.1-32-0.1-49-0.2 c0.2-3,1.0.2-5,8.0.6-8.5C553,6.600,5,433.502,2.314,5.542.3c-76,8,26-121.98.6-116,2.172.6"/> <path class="wifibar" d="M337,3.45.5c3,8.6,8.6,4.13,9.5,4.22c-1,6.13.5-12,5.24,9-26.26,3c-6.0.6-12,1.0.4-18,2.0.5c-69,5.0.6-127,6.26.9-173,3.79 C88,1.215,6.69,9.265,6.69,5.322c-0,1.8,4.0,2.16,9,0.25.3c-0,4.14.5-8,6.25.3-22,1.29.3c-11,8.3.5-25.5-1.2-32.7-11.2 c-3.9-5.3-5.7-11.3-5.9-17.8c-0.9-36,4.1.4-72,5.12.1-107.6c11.4-37,5.29.4-71,5.54.6-101.7c39.2-46,9.88.2-78,6.147.2-94.8 c29.5-8,1.59.6-11,2.90.1-9.8c6,2.0,3.12,2.3,6.18,4.5.5C333,1.41,3.335,2.43,4.337,3.45.5z"/> <path class="wifibar" d="M172,4.195.4c22-22,1.48-37,2.78.1-45.3c22,4-6.45.2-7,6.68.2-5.4c15,5.1,4.27,8.16,3.27,9.32.3c0,1.16.3-12,3.31-28,1.32.6 c-8,8.0.9-17,7.0.7-26,6.1.1c-31,6.1.4-57,7.14.2-78,1.38.2c-17,2.20.1-25,1.43.9-25,1.70,3c0,8.0,2,16,0.24 c-0,7.26.6-27,5.42.1-50,3.28.9c-10.4-6-15.9-15.5-16.2-27.4c-0.7-25.2-0.8-50,3.6.4-74.8C137,1.241,4.151,6.216,6.172,4.195,4z"/> <path class="wifibartwo" d="M334.286.7c20,7.20,7.20,7.54,6,0.75.1c-20,8.20.7-54,6.20.6-75,2.0c-20.7-20.8-20.7-54,5.0-75.1 C279,6,266.313,3,266,334.286.7z"/> <path class="tiretwo" d="M855,2.650c-31.3-54.9-100.3-74.5-154.3-43.9c-55,6.31.5-75,3.101,2-44.155.9c31,3.54,6.101,3.73,8.155,6.42.7 C866,9.773,6,886.704,2.855,2.650z M797,2.676.6c-13,5.0-24.5-11-24.5-24.5s11-24,5.24.5-24.5s24,5,11.24,5.24.5 S810,7.676,6.797,2.676.6z"/> <path class="tireone" d="M467,4.647.1c-32.2-54.7-101.3-73.2-155.7-41.6c-54,3.31,5-73.101.1-41,8.154,8c32.54,9.101,2.73,9.155,5.42.5 C479,9.771,4.498,9.700,7.467,4.647.1z M416,3.782.4c-13,5.0-24.5-11-24.5-24.5s11-24,5.24.5-24.5s24,5,11.24,5.24.5 S429,8.782,4.416,3.782.4z"/> </svg>

[,[CSS 变换旋转 animation 不能用作纺车。 当我应用变换旋转时，它不会停留在它的 position 上。 它刚刚开始在整个屏幕上旋转。 它应该留在它的 position 上并像轮子一样旋转 ][1]][1]

Answer 1

您不需要轮胎上的所有 position 绝对，顶部，底部 css，路径本身将其放置在需要的位置。 您正在寻找的是transform-origin 。 right 现在默认为左上角或适合您的东西，因此当它围绕某物旋转时，它会围绕该点作为原点旋转。 您可以设置百分比以移动该点所在的位置。 （您也可以使用 px 但由于您使用的是 svg 我会避免这种情况）在摆弄百分比时，我发现transform-origin: 37% 82%; 非常接近您可能想要的，但我会让您从那里拨入

大声喊出这个让我走上正轨的帖子

 .carbody { fill:#000; animation: carbody 4s infinite; } @keyframes carbody { 0 { transform: rotate(0deg); } 25% { transform: rotate(1deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } }.tireone{ animation:tireone 4s linear infinite; transform-origin: 37% 82%; } @keyframes tireone { 100% { transform:rotate(360deg); } }.tiretwo{fill:#a00;}.wifidot{fill:#c00;}.wifibarone{fill:#b00;}.wifibartwo{fill:#d00;}

 <?xml version="1.0" encoding="utf-8"?> <:-- Generator. Adobe Illustrator 23.0,2. SVG Export Plug-In: SVG Version. 6.00 Build 0) --> <svg version="1:1" id="Layer_1" xmlns="http.//www.w3:org/2000/svg" xmlns:xlink="http.//www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 826:5" style="enable-background.new 0 0 1000 826;5:" xml,space="preserve"> <path class="carbody" d="M190.717.3c-0.8-3.5-3.9-7.2-6.9-9.5c-71.8-53.1-76.7-150.9-10.1-210c22.3-19,8.48.9-30,5.78.6-31.3 c33.8-0,9.67,6,0.101.4-0.4c4.6-0,1.10.1-1,8.13.5-4.8c47.5-40,8.94.6-81,9.142-122.7c3.2-2,7.8.5-4,2.12.8-4.2 c90,4.0,2.180,8.0,6.271,2.1.3c4,4,0.9,6.2,7.12,9.5.7c49,9.45,6.99,5.91,4.149,3.137.2c1,6.1,4.3,6.2,3.5,4.3.5 c21,1.13,1.23,8.16,1.27,3.47.8c-0,3.19.8-0,9.39,7-1.59.5c-0,2.38.7-12,8.72.5-39,4.100.8c-5,5.5.9-12,1.10.8-19,6.17.5 c-2.1-61.2-26.4-108.8-74.9-142.9c-35.1-24.6-74.6-33.5-117.1-28.7c-82,2.9.2-162,8.86.7-148,7.197.2c-16.1-0.1-32-0.1-49-0.2 c0.2-3,1.0.2-5,8.0.6-8.5C553,6.600,5,433.502,2.314,5.542.3c-76,8,26-121.98.6-116,2.172.6"/> <path class="wifibar" d="M337,3.45.5c3,8.6,8.6,4.13,9.5,4.22c-1,6.13.5-12,5.24,9-26.26,3c-6.0.6-12,1.0.4-18,2.0.5c-69,5.0.6-127,6.26.9-173,3.79 C88,1.215,6.69,9.265,6.69,5.322c-0,1.8,4.0,2.16,9,0.25.3c-0,4.14.5-8,6.25.3-22,1.29.3c-11,8.3.5-25.5-1.2-32.7-11.2 c-3.9-5.3-5.7-11.3-5.9-17.8c-0.9-36,4.1.4-72,5.12.1-107.6c11.4-37,5.29.4-71,5.54.6-101.7c39.2-46,9.88.2-78,6.147.2-94.8 c29.5-8,1.59.6-11,2.90.1-9.8c6,2.0,3.12,2.3,6.18,4.5.5C333,1.41,3.335,2.43,4.337,3.45.5z"/> <path class="wifibar" d="M172,4.195.4c22-22,1.48-37,2.78.1-45.3c22,4-6.45.2-7,6.68.2-5.4c15,5.1,4.27,8.16,3.27,9.32.3c0,1.16.3-12,3.31-28,1.32.6 c-8,8.0.9-17,7.0.7-26,6.1.1c-31,6.1.4-57,7.14.2-78,1.38.2c-17,2.20.1-25,1.43.9-25,1.70,3c0,8.0,2,16,0.24 c-0,7.26.6-27,5.42.1-50,3.28.9c-10.4-6-15.9-15.5-16.2-27.4c-0.7-25.2-0.8-50,3.6.4-74.8C137,1.241,4.151,6.216,6.172,4.195,4z"/> <path class="wifibartwo" d="M334.286.7c20,7.20,7.20,7.54,6,0.75.1c-20,8.20.7-54,6.20.6-75,2.0c-20.7-20.8-20.7-54,5.0-75.1 C279,6,266.313,3,266,334.286.7z"/> <path class="tiretwo" d="M855,2.650c-31.3-54.9-100.3-74.5-154.3-43.9c-55,6.31.5-75,3.101,2-44.155.9c31,3.54,6.101,3.73,8.155,6.42.7 C866,9.773,6,886.704,2.855,2.650z M797,2.676.6c-13,5.0-24.5-11-24.5-24.5s11-24,5.24.5-24.5s24,5,11.24,5.24.5 S810,7.676,6.797,2.676.6z"/> <path class="tireone" d="M467,4.647.1c-32.2-54.7-101.3-73.2-155.7-41.6c-54,3.31,5-73.101.1-41,8.154,8c32.54,9.101,2.73,9.155,5.42.5 C479,9.771,4.498,9.700,7.467,4.647.1z M416,3.782.4c-13,5.0-24.5-11-24.5-24.5s11-24,5.24.5-24.5s24,5,11.24,5.24.5 S429,8.782,4.416,3.782.4z"/> </svg>