CSS transform rotate animation not working as a spinning wheel-CodePudding

.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  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  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  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  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  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  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 transform rotate animation not working as a spinning wheel, When I apply transform rotate it dose not stay on its position. its just start rotating all over the screen. it should stay on its position and spin as a wheel ][1]][1]

CodePudding user response：

you shouldn't need all that position absolute, top, bottom css on the tireone, the path itself is placing it where it needs to be. what you're looking for is transform-origin. right now defaults to the top left or something for you, so when it rotates around something it's rotating around that spot as the origin. you can set percentages to move where that spot is. (you can also use px but since you're using svg i would avoid that) in fiddling with the percentages i found that transform-origin: 37% 82%; got pretty close to what you probably want, but i'll let you dial it in from there

shout out to this SO post that got me on the right track

.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  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  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  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  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  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  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>