CODEWITHSUNDEEP
cssanimationsvg
tobzzz
tobzzz

Reputation: 119

CSS to flip (rotate) horizontally an SVG from center only works with image

I found someone's jsfiddle to do this with an image but it doesn't work for my SVG. 

transform: rotateY(-360deg);

It rotates on the far left edge instead of the center. I assume this is because of SVG paths working differently to an image but...

Is the a workaround to make the SVG rotate like the image is, from the center?

My fiddle to illustrate issue: https://jsfiddle.net/t0bz/Ldm0ytft/

Upvotes: 1

Views: 4130

Answers (3)

Alireza
Alireza

Reputation: 104730

The transform-origin property allows you to change the position of transformed elements.

2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.

So you can do it Using transform-origin: center center;

Also here is browser support table if you worry about using in old browsers:

`enter image description here

For more info about transform-origin,visit here

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157334

All you need to do is add transform-origin property and it should work well.

transform-origin: center center;

Demo

Just to add why it exactly is not working in your example is because you are using class="slidecaption" on path but you need to use it on your svg element.

Demo (without using transform-origin property)

Upvotes: 0

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14862

Its specific of SVG CSS Transformation. You can read about it here.

You need define transform-origin property.

`transform-origin: center center; `

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

Upvotes: 3

Related Questions