Multiple perspective origins on one page to make mirrored images. Help please.

[Th3M8dH8tt3r]

Hey guys,

First post for me because I have finally reached a dead end on this.

Here’s what I want to achieve. Using the webkit perspective and rotateY tools available to us, I would like a 2 column layout with images down the left column rotated at 15 degrees and image down the right column, essentially mirrored. So that the page look symmetrical.

I have succeeded in getting this far but it then leads on to an issue with perspective origin. “top” is literally from the top of the div so you end up looking down at the bottom rows. Center does the same and obvious what bottom does.

I thought I’d solve this by making 3 independent rows, each with a parent div that has the perspective-origin assigned. But alas, it is not working very well. Now the angles do not symmetrical and my very limited 3 week experience is holding me back or leading me down a path trying to do something that isn’t actually possible.

Any comments would be massively welcome and appreciated.

I can’t really upload to codepen as I have half a dozen files linking through but could upload a screen grab.

Thanks.

[Paulie_D]

Screenshot of what you are trying to achieve would be useful.

[Th3M8dH8tt3r]

As you can see, the rows have slightly different alignment to each other. I can get the text to sit nicely under the image no problem and I’ve got to the point where the angles are the same between the image but it’s the perspective origin that’s screwing it up.

I need to give the exact same perspective to each row but it doesn’t matter if I make three seperate parent divs or one big one. It is much much closer using three separate parent divs and then targeting the image within the child div for the actual rotation.

[Paulie_D]

So it’s only the ‘images’ which are rotated or the images **and** associated text?

[Th3M8dH8tt3r]

Yeah it is. Everything else will remain 2D. I thought it would be a nicer take on the traditional 6 panels on a page to put a bit of depth, and that magic word…perspective. However, I’ve been trying to work out how to do it for hours and I just can’t quite get it right.

[Th3M8dH8tt3r]

Would putting the child divs in a list or table sort it out? Then apply the perspective-origin to the table or list?

[Paulie_D]

I’m thinking of two columns with rows in each. Color for highlighting only.

Like this: http://codepen.io/Paulie-D/pen/bdFej

Then see if we can apply the perspective to individual divs via a class.

[Th3M8dH8tt3r]

At the moment I have a class for each segment of the 6 part “table”. Top row is called topLeft and topRight, then middleLeft, middleRight…you get the idea.

I’ve then got my img src and p tags inside that div. I’ve then applied the perspective jointly to topLeft and topRight at the same time etc. Then used topLeft img{ for the actual rotation and that’s what we’ve got there.

Thinking about it, I’ll be able to upload the images with CSS to codepen. Make it easier then trying to explain.

[Paulie_D]

Codepen updated to include some perspective.

http://codepen.io/Paulie-D/pen/bdFej

[Th3M8dH8tt3r]

I’ve finally tweaked things to work in codepen properly. Here’s a link:

http://codepen.io/Th3M8dH8tt3r/pen/zyKuB

I really appreciate you taking the time to look at this. It’s been frustrating the hell out of me for the last 24 hours.

[Th3M8dH8tt3r]

OK, finally I have solved it.

Just in case anyone is interested, here’s the codepen:

http://codepen.io/Th3M8dH8tt3r/details/zyKuB#pen-details-tab

Possibly some tweaking required but it’s a good start.

I know it’s not exactly revolutionary but I have that nice feeling of working something out through experimentation and trying.

Thanks Paulie for your help. :)

[Author]

Posts