5
Tôi hiện đang cố gắng xoay nhóm SVG bằng cách sử dụng chuyển đổi CSS và tạo hoạt ảnh bằng cách sử dụng chuyển tiếp CSS. Tôi đang nhận được biến đổi mong muốn nhưng không phải là animate, bất kỳ ý tưởng về những gì vấn đề có thể được?Chuyển tiếp CSS và biến đổi trên các phần tử SVG
Inline SVG Mã
<a href="javascript:void(0)" class="hub-icon-container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 70 70" enable-background="new 0 0 70 70" xml:space="preserve">
<g class="hub-icon">
<path fill="#9B59B6" d="M64.142 23.032L35.001 34.998l14.533 6.271 18.908-7.766c0.689-0.285 1.026-1.087 0.744-1.782l-3.265-7.946C65.635 23.079 64.835 22.747 64.142 23.032z"/>
<path fill="#F74ED7" d="M64.068 47.142L35.001 34.998l5.845 14.712 18.861 7.876c0.688 0.29 1.495-0.04 1.783-0.73l3.312-7.931C65.09 48.233 64.763 47.431 64.068 47.142z"/>
<path fill="#F2C40D" d="M46.97 64.138l-11.97-29.14 -6.268 14.534L36.5 68.44c0.284 0.689 1.084 1.026 1.779 0.743l7.946-3.265C46.919 65.634 47.256 64.833 46.97 64.138z"/>
<path fill="#E67E22" d="M22.863 64.069l12.138-29.071 -14.707 5.846 -7.877 18.859c-0.292 0.692 0.039 1.497 0.731 1.784l7.93 3.311C21.771 65.089 22.573 64.76 22.863 64.069z"/>
<path fill="#E74C3C" d="M5.865 46.966l29.136-11.968 -14.531-6.267L1.562 36.498c-0.693 0.285-1.028 1.089-0.741 1.78l3.263 7.947C4.369 46.919 5.168 47.254 5.865 46.966z"/>
<path fill="#19BC9C" d="M5.935 22.858l29.065 12.14 -5.839-14.707 -18.863-7.876c-0.693-0.29-1.495 0.039-1.785 0.73l-3.311 7.931C4.914 21.768 5.241 22.57 5.935 22.858z"/>
<path fill="#2ECC71" d="M23.032 5.862l11.969 29.136 6.269-14.528L33.506 1.563c-0.286-0.697-1.089-1.03-1.783-0.746l-7.944 3.268C23.084 4.366 22.75 5.168 23.032 5.862z"/>
<path fill="#3398DB" d="M47.142 5.934L35.001 34.998l14.707-5.841L57.589 10.3c0.286-0.697-0.044-1.499-0.735-1.789l-7.929-3.308C48.232 4.911 47.432 5.245 47.142 5.934z"/>
</g>
</svg>
</a>
Compass SCSS
.hub-icon-container {
@include transition(all 0.5s ease-in-out);
&:hover {
.hub-icon {
transform:rotate(180deg);
transform-origin:50% 50%;
-ms-transform:rotate(180deg);
-ms-transform-origin:50% 50%;
-webkit-transform:rotate(180deg);
-webkit-transform-origin:50% 50%;
}
}
}
Biên soạn CSS
.hub-icon-container {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hub-icon-container:hover .hub-icon {
transform:rotate(180deg);
transform-origin:50% 50%;
-ms-transform:rotate(180deg);
-ms-transform-origin:50% 50%;
-webkit-transform:rotate(180deg);
-webkit-transform-origin:50% 50%;
}
CodePen liên kết bên dưới
http://codepen.io/alexbaulch/pen/bDkhv