html节点转成svg节点,html – CSS转换和转换SVG元素

固定它！

转型是在错误的地方,我曾假设过渡将下降到儿童元素,但显然不是.还通过在0到180度之间设置动画来固定旋转.

内联SVG

指南针SCSS

.hub-icon-container {

&:hover {

.hub-icon {

transform:rotate(180deg);

-ms-transform:rotate(180deg);

-webkit-transform:rotate(180deg);

}

}

.hub-icon {

@include transition(all 0.5s ease-in-out);

transform:rotate(0deg);

transform-origin:50% 50%;

-ms-transform:rotate(0deg);

-ms-transform-origin:50% 50%;

-webkit-transform:rotate(0deg);

-webkit-transform-origin:50% 50%;

}

}

编译CSS

.hub-icon-container:hover .hub-icon {

transform: rotate(180deg);

-ms-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

}

.hub-icon-container .hub-icon {

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

transform: rotate(0deg);

transform-origin: 50% 50%;

-ms-transform: rotate(0deg);

-ms-transform-origin: 50% 50%;

-webkit-transform: rotate(0deg);

-webkit-transform-origin: 50% 50%;

}

CodePen更新如下