javascript - 如何将 "pin"html 元素添加到父级，但防止旋转继承？

Question

我正在尝试构建一个特定的 UI 元素，该元素基于旋转带有各种指示器的控制对象。该控件是一个包含 SVG 的 Object 元素，在 SVG 中嵌入了 image 标签，这些标签是用户与之交互的图标。当用户旋转元素使图标位于“目标区域”内时，将触发某些功能。

这里有一个非常非常简单的例子:http://jsfiddle.net/megakoresh/pp7mt1nm/2/

该元素是使用通过 javascript 设置的 CSS transform: rotate() 属性构建的，正如您从示例中看到的那样，它的所有子元素都随之旋转。我想做的是让它们保持直立，但仍然改变位置，就好像它们“悬挂”在父元素上一样。

如果你去 fiddle 并取消注释 JS 代码，你可以看到一个使用 requestAnimationFrame 的解决方案，但它确实又重又乱，我真的不喜欢它。有没有更好的方法可以在父级旋转时保持元素直立，但仍让它们随之移动？

重要:

好吧，我想我还不够清楚:这是我正在构建的可旋转 UI 元素。 130deg 只是一个示例 - 用户可以将元素旋转到他们希望的任何 Angular 。我不能简单地对这些度数进行硬编码，我必须防止 children 继承旋转。

正如 Polywhirl 先生所指出的，它是这样的:

http://codepen.io/mr_alien/pen/Alzqe

除了用户可以捕获轮子并自己向任何方向旋转。

Answer 1

a {
    transition: transform 1s ease;
}
.block:hover a {
    transform: rotate(-130deg);
}