0

The following perspective effect was done with CSS:

rotateY(-35deg) rotateX(15deg) translate3d(0, 0, 0)

enter image description here

Link to see it live

I have tried to achieve the same effect with the free transform of some vector tools, but the result is not the same. For example, with VectorStyler 4-Point Distortion:

enter image description here

It looks different. Compare the red PDF logo for example, it looks more natural in the first image than the second.

What tool in Mac can I use to achieve a 3D rotation effect like the one with CSS?

Improve this question
7
  • 1
    How is the effect not the same? What do you mean by "natural looking"? Not sure If I understand what you are asking to be honest. You can distort vector graphics using almost any vector image editing software, Illustrator, Inkscape, etc. Merely distorting an image shouldn't change the colour if that's what you are asking.
    – Billy Kerr
    Mar 5 at 11:11
  • 4point distortiin is not the same as a perspective distortion. Theres no actual way of going from that to perspective, your application simply has to have a true perspective transform. But it would be hard for the vector application to do this as there is no functionality to accept that in any vector container format. So you could never ship it.
    – joojaa
    Mar 5 at 13:46
  • @joojaa, but wouldn't a vector application in theory be able to at least make the transformation destructively? Btw, it would be interesting to see an answer from you explaining the difference between those two kinds of transformation. Exemplified with a grid to be able to visually see the difference.
    – Wolff
    Mar 5 at 15:15
  • @Wolff whe vector standard formats have no function for the perspective divide for a texture. Its also a problem for curved elements. But can be approximated for pure vector elements to some degree.
    – joojaa
    Mar 5 at 20:01
  • @jooaa, I see. But I was under the impression that the OP needed to transform vector. If it's just raster then why not just do the transformation with CSS which works and take a screenshot?
    – Wolff
    Mar 5 at 20:54

2 Answers 2

Reset to default
0

I tried a number of vector editing apps from the Mac Store, none of them could achieve the 3D transformation.

I ended printing the page as a PDF using Chrome (Safari didn't work) and then imported the PDF to an Affinity Designer vector document.

Improve this answer
0

I think that you can consider Illustrator as solution. You can group your graphic in to a Symbol and put your symbol as fill in the 3d panel. before doing that you have to create an extrusion of a rectangle.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.