CSS3旋转问题

问题描述：

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

我已经试过这一点：

.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); 
}

但是动画效果非常有趣。我做错了什么？

Objects

您能否提供足够的代码来复制问题或提供实时演示？我的猜测是你没有考虑到箭头部分 – 2014-11-08 15:33:50

当然，这里是完整的场景：http://jsfiddle.net/3c7zf4uq/ – 2014-11-08 16:09:40

那个小提琴没有旋转动画（至少在Chrome上） – 2014-11-08 17:08:33

答

几杯咖啡后，我终于设法做到了。我所做的就是从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

我希望这会帮助别人有类似问题的:)

答

你所得到的怪异行为，因为过渡：所有造成两个不同的变换起源之间的过渡 - 默认和你明确指定一个。现在，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; 
}

请注意，变换原点的50％50％不太有效，因为指针正被包含在中心的计算中。此外，你可能会认为你可以通过从转换全部切换到转换转换（不包括转换原点）来解决此问题，但这不起作用。只有在基类中指定转换原点才能实现。

感谢您的详细解释。 – 2014-11-09 15:30:45

CSS3旋转问题

相关推荐