How do I use transformations to make a div look like a trapezoid?

Design help General
1

Hello,

I am attempting to create the illusion of depth on the homepage of this website. As you can see, I have placed two blurred particle rays (I used divs) that move across the screen. I would like the one that comes “closest”, at the front, to arch outward in a trapezoidal fashion and I’d like to do the opposite for the one on the left side.

700×307 3.13 KB

Could someone advise me on how I could accomplish this effect only using transformations on a single div (if possible)? Alternatively, if you have any design recommendations on how to make this look as cool as possible, those would be much appreciated. Perhaps some parallax? Not sure, just yet.

Thanks!
Christopher

Also, I prefer to not share a preview link.

2

https://v.usetapes.com/wBi3B4ZNyC

5 Likes
3

This tutorial is going to change my world. Thank you!!!

1 Like
4

You can so some really fun stuff with 3D transforms @ctrav : http://3d-transforms.webflow.com

5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.