从中心水平翻转(旋转)SVG的CSS仅适用于图像

时间:2017-06-01 11:32:06

标签: css animation svg

我找到了一个人用jsfiddle用图像来做这件事,但它对我的SVG不起作用。

transform: rotateY(-360deg); 

它在最左边缘而不是中心上旋转。我认为这是因为SVG路径与图像的工作方式不同,但......

是一种解决方法,使SVG像图像一样从中心旋转吗?

我的小提琴来说明问题:https://jsfiddle.net/t0bz/Ldm0ytft/

3 个答案:

答案 0 :(得分:1)

其特定的SVG CSS转换。你可以阅读它here

您需要定义transform-origin属性。

`transform-origin: center center; `

https://jsfiddle.net/Ldm0ytft/2/

答案 1 :(得分:0)

您需要做的只是添加transform-origin属性,它应该可以正常运行。

transform-origin: center center;

Demo

只是添加为什么它在您的示例中无法正常工作是因为您在class="slidecaption"上使用path,但您需要在svg元素上使用它。

Demo(不使用transform-origin属性)

答案 2 :(得分:0)

  

transform-origin属性允许您更改位置   转化的元素。

     

2D变换可以改变元素的x轴和y轴。 3D   转换也可以改变元素的z轴。

所以你可以使用var madd3 = R.lift((a, b, c) => a + b + c); madd3([100, 200], [30, 40, 50], [6, 7]); //=> [136, 137, 146, 147, 156, 157, 236, 237, 246, 247, 256, 257]

来做到这一点

如果您担心在旧浏览器中使用,还可以使用浏览器支持表:

`enter image description here

有关transform-origin的更多信息,请访问here