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

Question

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

transform: rotateY(-360deg); 

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

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

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

Answer 1

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

您需要定义transform-origin属性。

`transform-origin: center center; `

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

Answer 2

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

transform-origin: center center;

Demo

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

Demo（不使用transform-origin属性）

Answer 3

  

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]

来做到这一点

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

`

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