Анимация вращения 360
.wings svg{
transform-origin: center center;
animation: spin 5s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class='image_casher'>
<div class="center">
<div class='wings'>
<svg width="169" height="174" viewBox="0 0 169 174" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68.5819 4.71313L80.3995 77.3043H82.2982C82.2982 70.6923 84.7606 71.3957 89.5437 66.5422C93.3703 62.6595 93.7186 55.9912 92.4277 52.8259C85.1123 34.8891 72.3099 -0.140356 69.2857 0.000300246C67.932 0.063264 68.3474 3.63457 68.5819 4.71313Z" fill="#DAEDF5" />
<path d="M83.0016 50.7859L70.1997 0.633301C71.6065 2.25113 73.8051 7.07358 76.1083 12.0988C78.4295 17.1633 87.6675 40.868 92.1459 52.0521C92.7086 53.3182 93.4823 55.7801 92.9196 59.2971C87.011 60.31 83.5643 53.9982 83.0016 50.7859Z" fill="#B9CED7" />
<path d="M159.655 102.383L88.0233 84.4401L87.2731 86.1843C93.3724 88.8075 91.7507 90.7905 94.338 97.11C96.4079 102.166 102.421 105.131 105.851 105.201C125.287 105.597 162.659 107.733 163.724 104.899C164.201 103.631 160.742 102.596 159.655 102.383Z" fill="#DAEDF5" />
<path d="M111.651 97.4345L162.781 105.489C160.739 106.142 155.44 106.257 149.914 106.387C144.345 106.518 118.919 105.639 106.875 105.335C105.49 105.351 102.922 105.089 99.9137 103.183C101.318 97.3548 108.478 96.6824 111.651 97.4345Z" fill="#B9CED7" />
<path d="M14.3039 128.311L75.7743 87.9312L75.0003 86.1973C68.9625 88.8924 68.6012 86.3571 62.2195 83.9677C57.1142 82.0561 50.8831 84.456 48.5188 86.925C35.1215 100.916 8.35228 126.885 9.71339 129.589C10.3227 130.8 13.4145 128.965 14.3039 128.311Z" fill="#DAEDF5" />
<path d="M50.4982 96.364L9.91898 128.497C10.8229 126.553 14.3304 122.579 17.9804 118.428C21.659 114.244 39.5397 96.1459 47.9272 87.4978C48.854 86.4679 50.7867 84.7578 54.2277 83.8381C57.561 88.8208 53.2021 94.5409 50.4982 96.364Z" fill="#B9CED7" />
<circle cx="81.1727" cy="83.9862" r="6.89335" fill="#B2C7D0" />
<circle cx="81.1727" cy="83.9863" r="3.51702" fill="#DAEDF5" />
<path d="M28.2754 93.6228C25.7666 78.9686 28.8522 46.4104 61.265 33.4115" stroke="url(#paint0_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M39.1782 87.433C39.1782 67.5267 48.3224 51.4187 64.782 44.244" stroke="url(#paint1_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M17.5586 102.415C13.2226 87.3626 11.8861 39.8126 61.4057 20.8207" stroke="url(#paint2_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M94.1152 30.0352C108.887 32.4268 139.766 50.2932 137.585 88.4177" stroke="url(#paint3_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M96.5068 42.4151C114.717 50.4553 127.175 65.8384 126.19 87.0811" stroke="url(#paint4_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M91.4423 17.7257C107.972 18.4994 152.849 37.632 149.192 91.9347" stroke="url(#paint5_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M123.236 121.196C111.067 138.992 68.2301 149.262 43.189 123.447" stroke="url(#paint6_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M110.997 117.679C97.2103 129.989 69.0742 132.24 52.5442 116.413" stroke="url(#paint7_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M136.671 123.658C120.634 147.222 72.7319 168.817 33.6227 129.989" stroke="url(#paint8_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<defs>
<linearGradient id="paint0_linear_0_1" x1="44.431" y1="33.4115" x2="44.431" y2="93.6228" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint1_linear_0_1" x1="51.9801" y1="44.244" x2="51.9801" y2="87.433" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint2_linear_0_1" x1="38.5106" y1="20.8207" x2="38.5106" y2="102.415" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint3_linear_0_1" x1="145.06" y1="71.4895" x2="87.1091" y2="45.9032" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint4_linear_0_1" x1="132.021" y1="73.8754" x2="90.6762" y2="55.6208" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint5_linear_0_1" x1="158.748" y1="70.2919" x2="82.9996" y2="36.8476" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint6_linear_0_1" x1="52.5222" y1="140.794" x2="115.538" y2="106.888" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint7_linear_0_1" x1="59.5836" y1="129.497" x2="104.385" y2="105.391" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint8_linear_0_1" x1="45.3909" y1="151.861" x2="127.946" y2="107.442" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>
Почему вращение происходит с отклонением небольшим, будто вокруг центра крутится, а не строго по центру
Ответы (1 шт):
Автор решения: Qwertiy
→ Ссылка
Потому что центр пропеллера не в центре svg:
Думаю, стоит всё просто подвинуть в редакторе. Ну или поиграться с viewBox - что-то около 0 0 162 168
даёт почти правильный результат.
.wings svg{
transform-origin: center center;
animation: spin 5s linear infinite;
}
svg * {
opacity: .5
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class='image_casher'>
<div class="center">
<div class='wings'>
<svg width="169" height="174" viewBox="0 0 162 168" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68.5819 4.71313L80.3995 77.3043H82.2982C82.2982 70.6923 84.7606 71.3957 89.5437 66.5422C93.3703 62.6595 93.7186 55.9912 92.4277 52.8259C85.1123 34.8891 72.3099 -0.140356 69.2857 0.000300246C67.932 0.063264 68.3474 3.63457 68.5819 4.71313Z" fill="#DAEDF5" />
<path d="M83.0016 50.7859L70.1997 0.633301C71.6065 2.25113 73.8051 7.07358 76.1083 12.0988C78.4295 17.1633 87.6675 40.868 92.1459 52.0521C92.7086 53.3182 93.4823 55.7801 92.9196 59.2971C87.011 60.31 83.5643 53.9982 83.0016 50.7859Z" fill="#B9CED7" />
<path d="M159.655 102.383L88.0233 84.4401L87.2731 86.1843C93.3724 88.8075 91.7507 90.7905 94.338 97.11C96.4079 102.166 102.421 105.131 105.851 105.201C125.287 105.597 162.659 107.733 163.724 104.899C164.201 103.631 160.742 102.596 159.655 102.383Z" fill="#DAEDF5" />
<path d="M111.651 97.4345L162.781 105.489C160.739 106.142 155.44 106.257 149.914 106.387C144.345 106.518 118.919 105.639 106.875 105.335C105.49 105.351 102.922 105.089 99.9137 103.183C101.318 97.3548 108.478 96.6824 111.651 97.4345Z" fill="#B9CED7" />
<path d="M14.3039 128.311L75.7743 87.9312L75.0003 86.1973C68.9625 88.8924 68.6012 86.3571 62.2195 83.9677C57.1142 82.0561 50.8831 84.456 48.5188 86.925C35.1215 100.916 8.35228 126.885 9.71339 129.589C10.3227 130.8 13.4145 128.965 14.3039 128.311Z" fill="#DAEDF5" />
<path d="M50.4982 96.364L9.91898 128.497C10.8229 126.553 14.3304 122.579 17.9804 118.428C21.659 114.244 39.5397 96.1459 47.9272 87.4978C48.854 86.4679 50.7867 84.7578 54.2277 83.8381C57.561 88.8208 53.2021 94.5409 50.4982 96.364Z" fill="#B9CED7" />
<circle cx="81.1727" cy="83.9862" r="6.89335" fill="#B2C7D0" />
<circle cx="81.1727" cy="83.9863" r="3.51702" fill="#DAEDF5" />
<path d="M28.2754 93.6228C25.7666 78.9686 28.8522 46.4104 61.265 33.4115" stroke="url(#paint0_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M39.1782 87.433C39.1782 67.5267 48.3224 51.4187 64.782 44.244" stroke="url(#paint1_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M17.5586 102.415C13.2226 87.3626 11.8861 39.8126 61.4057 20.8207" stroke="url(#paint2_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M94.1152 30.0352C108.887 32.4268 139.766 50.2932 137.585 88.4177" stroke="url(#paint3_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M96.5068 42.4151C114.717 50.4553 127.175 65.8384 126.19 87.0811" stroke="url(#paint4_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M91.4423 17.7257C107.972 18.4994 152.849 37.632 149.192 91.9347" stroke="url(#paint5_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M123.236 121.196C111.067 138.992 68.2301 149.262 43.189 123.447" stroke="url(#paint6_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M110.997 117.679C97.2103 129.989 69.0742 132.24 52.5442 116.413" stroke="url(#paint7_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<path d="M136.671 123.658C120.634 147.222 72.7319 168.817 33.6227 129.989" stroke="url(#paint8_linear_0_1)" stroke-width="1.54749" stroke-linecap="round" />
<defs>
<linearGradient id="paint0_linear_0_1" x1="44.431" y1="33.4115" x2="44.431" y2="93.6228" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint1_linear_0_1" x1="51.9801" y1="44.244" x2="51.9801" y2="87.433" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint2_linear_0_1" x1="38.5106" y1="20.8207" x2="38.5106" y2="102.415" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint3_linear_0_1" x1="145.06" y1="71.4895" x2="87.1091" y2="45.9032" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint4_linear_0_1" x1="132.021" y1="73.8754" x2="90.6762" y2="55.6208" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint5_linear_0_1" x1="158.748" y1="70.2919" x2="82.9996" y2="36.8476" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint6_linear_0_1" x1="52.5222" y1="140.794" x2="115.538" y2="106.888" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint7_linear_0_1" x1="59.5836" y1="129.497" x2="104.385" y2="105.391" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
<linearGradient id="paint8_linear_0_1" x1="45.3909" y1="151.861" x2="127.946" y2="107.442" gradientUnits="userSpaceOnUse">
<stop stop-color="#B7D6E4" stop-opacity="0.5" />
<stop offset="0.125" stop-color="#B7D6E4" />
<stop offset="0.875" stop-color="#B7D6E4" />
<stop offset="1" stop-color="#B7D6E4" stop-opacity="0.5" />
</linearGradient>
</defs>
</svg>
</div>
</div>
</div>