CSS3旋转问题答案

【问题标题】：Issue with CSS3 rotationCSS3旋转问题
【发布时间】：2014-11-08 15:28:20
【问题描述】：

我遇到了 CSS3 旋转问题。在图像上，您可以看到我需要在悬停时设置动画的 SVG 对象。左边的对象是一个开始状态，右边的对象是我必须完成的一个例子。

我试过这个：

.svg-pokazivac {
   transition: .2s all ease-in-out;
}
.svg-pokazivac:hover {
   transform: rotate(45deg);
   transform-origin: center center;
}

但无论我做什么以及我选择哪个变换原点，我总是得到以某种方式错位并被翻译到某个奇怪位置的对象。到目前为止，我最接近的解决方案是使用如下所示的代码：

.svg-pokazivac:hover {
   transform: translate(350px,-150px) rotate(45deg);
}

但是那个动画很有趣。我做错了什么？

【问题讨论】：

您能否为我们提供足够的代码来复制问题或提供现场演示？我猜你没有考虑箭头部分
当然，这里是完整的场景：jsfiddle.net/3c7zf4uq
那个小提琴没有旋转动画（至少在 Chrome 上）
@MichaelMullany 只需在问题中添加代码
@IgorHrcek 我建议将圆圈和箭头分成 2 条路径，这样会更容易计算出正确的变换原点

标签： css svg rotation transform

【解决方案1】：

你得到了奇怪的行为，因为 transition: all 导致两个不同的变换源之间的转换——默认的和你明确指定的。现在 CSS 转换原点的默认默认值应该是 50% 50% - 所以这应该不是问题，但显然 Chrome 认为 SVG 形状的默认默认值是 0% 0% 的 SVG 转换默认值. [可能的错误！] 如果您将转换原点添加到您的基类，它就可以正常工作。

.svg-pokazivac {
   transition: .2s all ease-in-out;
       transform-origin: 347px 347px;
}
.svg-pokazivac:hover {
   transform: rotate(1805deg);
   transform-origin: 347px 347px;
}

请注意，transform-origin 的 50% 50% 不太有效，因为指针包含在中心的计算中。此外，您可能认为可以通过从全部转换转换为转换转换（不包括转换原点）来解决此问题，但这不起作用。只有在基类中指定变换原点才能达到目的。

【讨论】：

感谢您的详细解释。

【解决方案2】：

喝了几杯咖啡后，我终于成功了。我所做的是从 SVG 元素中完全删除指针和圆圈，并在纯 CSS 中重新制作它们：

.svg-pointer {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 45.5px 46px 45.5px;
    border-color: transparent transparent #4e4e4e transparent;
    position: absolute;
    top: 125px;
    left: 306px;
    transform-origin: 50% 227px;
}

.svg-circle {
    width: 379px;
    height: 379px;
    border-radius: 999px;
    background: #4e4e4e;
    position: absolute;
    top: 161px;
    left: 159px;
}

剩下的只是一个 javascript 转换操作。您可以在此处查看整个解决方案： http://jsfiddle.net/3c7zf4uq/7/

另外，我想指出这篇对我很有帮助的文章：http://demosthenes.info/blog/860/Animating-Elements-In-Arcs-Circles-and-Ellipses-With-CSS

我希望它能帮助有类似问题的人:)

【讨论】：