Home › Forums › CSS › Multiple perspective origins on one page to make mirrored images. Help please.
- This topic is empty.
-
AuthorPosts
-
April 23, 2013 at 10:47 am #44086
Th3M8dH8tt3r
MemberHey 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.
April 23, 2013 at 11:05 am #132862Paulie_D
MemberScreenshot of what you are trying to achieve would be useful.
April 23, 2013 at 11:13 am #132865Th3M8dH8tt3r
Member
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.
April 23, 2013 at 11:21 am #132866Paulie_D
MemberSo it’s only the ‘images’ which are rotated or the images **and** associated text?
April 23, 2013 at 11:22 am #132867Th3M8dH8tt3r
MemberYeah 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.
April 23, 2013 at 11:28 am #132870Th3M8dH8tt3r
MemberWould putting the child divs in a list or table sort it out? Then apply the perspective-origin to the table or list?
April 23, 2013 at 11:49 am #132874Paulie_D
MemberI’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.
April 23, 2013 at 11:53 am #132876Th3M8dH8tt3r
MemberAt 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.
April 23, 2013 at 12:05 pm #132877Paulie_D
MemberCodepen updated to include some perspective.
April 23, 2013 at 12:12 pm #132878Th3M8dH8tt3r
MemberI’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.
April 23, 2013 at 7:08 pm #132937Th3M8dH8tt3r
MemberOK, 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. :)
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.