CSS从中心水平翻转（旋转）一个SVG只能与图像一起使用

问题描述：

我发现某人的jsfiddle可以对图像执行此操作，但它不适用于我的SVG。CSS从中心水平翻转（旋转）一个SVG只能与图像一起使用

transform: rotateY(-360deg);

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

解决方法是让SVG像图像一样从中心旋转？

[SVG css旋转粘连而不是绕中心旋转的可能的副本]（https://*.com/questions/20954895/svg- css-rotation-sticking-and-not-rotating-about-the-center） –

答

其SVG CSS转型的具体。你可以阅读关于它here。

您需要定义transform-origin属性。

`transform-origin: center center; `

答

所有你需要做的就是添加transform-origin属性，它应该很好地工作。

transform-origin: center center;

我想补充为什么它究竟是不是在你的例子是工作，因为你正在使用pathclass="slidecaption"，但你需要使用它您svg元素。

Demo（不使用transform-origin属性）

@ RichardParnaby-King对不起，我没有看到它 –

奇怪 - 每jsfiddle显示我错误的版本？我会删除我的评论。 –

答

变换-origin属性允许您更改的已变换元素的位置。

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

所以，你可以做到这一点使用transform-origin: center center;

另外这里的浏览器支持表，如果你担心使用旧的浏览器：

欲了解更多信息有关变换出身，访问here