CSS3 Transformation Suggestion: Add additional perspective version to 3D transformations
in [CSS]
|
Prev: Which CSS apply to <frameset> and <frame>?
Next: Form
From: Axel Dahmen on 20 Mar 2010 13:24 Hi, I'd like to suggest another function prototype to the CSS3 3D Transformation perspective definition: The second perspective function declaration would be: perspective(dx1,dy1,dx2,dy2,dx3,dy3,dx4,dy5) Where parameters constitute four <length>,<length> tuples, describing an offset from each of the four originally computed corners, given in this sequence: top-left, top-right, bottom-left, bottom-right. I believe this version is easier for designers to tackle with than the original declaration. Here's an example projecting an image into street-view (i.e. " | ____ | " into " /____\ " ): perspective(30%, 50%, -30%, 50%, 0, 0, 0, 0) RFC Axel Dahmen
From: Axel Dahmen on 20 Mar 2010 13:25 Sorry, I made a typo in the declaration. Of course it should be: perspective(dx1,dy1, dx2,dy2, dx3,dy3, dx4,dy4) -------------------------- "Axel Dahmen" <KeenToKnow(a)newsgroup.nospam> schrieb im Newsbeitrag news:ho30bv$9d0$1(a)online.de... > Hi, > > I'd like to suggest another function prototype to the CSS3 3D > Transformation perspective definition: > > The second perspective function declaration would be: > > perspective(dx1,dy1,dx2,dy2,dx3,dy3,dx4,dy5) > > Where parameters constitute four <length>,<length> tuples, describing an > offset from each of the four originally computed corners, given in this > sequence: top-left, top-right, bottom-left, bottom-right. > > I believe this version is easier for designers to tackle with than the > original declaration. > > Here's an example projecting an image into street-view (i.e. " | ____ | " > into " /____\ " ): > > perspective(30%, 50%, -30%, 50%, 0, 0, 0, 0) > > RFC > > Axel Dahmen
From: Ben C on 20 Mar 2010 14:58 On 2010-03-20, Axel Dahmen <KeenToKnow(a)newsgroup.nospam> wrote: > Hi, > > I'd like to suggest another function prototype to the CSS3 3D Transformation > perspective definition: > > The second perspective function declaration would be: > > perspective(dx1,dy1,dx2,dy2,dx3,dy3,dx4,dy5) > > Where parameters constitute four <length>,<length> tuples, describing an > offset from each of the four originally computed corners, given in this > sequence: top-left, top-right, bottom-left, bottom-right. The four originally computed corners of what? The unit square in the xz plane? > I believe this version is easier for designers to tackle with than the > original declaration. > > > > Here's an example projecting an image into street-view (i.e. " | ____ | " > into " /____\ " ): > > perspective(30%, 50%, -30%, 50%, 0, 0, 0, 0) Would dx2,dy2 ever be anything different from -dx1,-dy1? And would the last four numbers ever not be 0? One weakness with: http://www.w3.org/TR/css3-3d-transforms/#perspective is that it appears you can only define a square frustum, not a rectangular one. It ought to have two parameters really-- depth and aspect ratio would do.
From: Axel Dahmen on 21 Mar 2010 09:48 Hi, Ben, > The four originally computed corners of what? The unit square in the xz > plane? Actually I can't tell. I'm not an expert in 2D graphics. The originally computed values would be the four corners of the element without this perspective function being applied. E.g. on a positioned element with "position: absolute; left: 10px; top: 20px; width: 100px; height: 120px", and having no other transformation applied yet, the original values would be: x1 = 10, y1 = 20 x2 = 110, y2 = 20 x3 = 10, y3 = 140 x4 = 110, y4 = 140 Having a perspective applied with arguments: dx1 = -10%, dy1 = -15% dx2 = -20%, dy2 = -25% dx3 = 20%, dy3 = 10% dx4 = -10%, dy4 = -5% the resulting corner coordinates would be (something like): x1 = 9, y1 = 15 x2 = 88, y2 = 15 x3 = 12, y3 = 154 x4 = 99, y4 = 133 and all pixels of the image interpolated within this new plane. > Would dx2,dy2 ever be anything different from -dx1,-dy1? And would the > last four numbers ever not be 0? I crafted above example to reflect your question. Is this what you had been asking for? > One weakness with: > > http://www.w3.org/TR/css3-3d-transforms/#perspective > > is that it appears you can only define a square frustum, not a > rectangular one. It ought to have two parameters really-- depth and > aspect ratio would do. Agreed. But still some in-depth knowledge or great powers of imagination would be required to find the right values. That's why I'd like to suppose the above alternative. With this alternative setting appropriate values won't be not so much of a try & error thing. Cheers, Axel Dahmen www.axeldahmen.de
From: Ben C on 21 Mar 2010 10:53
On 2010-03-21, Axel Dahmen <KeenToKnow(a)newsgroup.nospam> wrote: > Hi, Ben, > >> The four originally computed corners of what? The unit square in the xz >> plane? > > Actually I can't tell. I'm not an expert in 2D graphics. The originally > computed values would be the four corners of the element without this > perspective function being applied. > > E.g. on a positioned element with "position: absolute; left: 10px; top: > 20px; width: 100px; height: 120px", and having no other transformation > applied yet, the original values would be: > > x1 = 10, y1 = 20 > x2 = 110, y2 = 20 > x3 = 10, y3 = 140 > x4 = 110, y4 = 140 > > > Having a perspective applied with arguments: > > dx1 = -10%, dy1 = -15% > dx2 = -20%, dy2 = -25% > dx3 = 20%, dy3 = 10% > dx4 = -10%, dy4 = -5% > > > the resulting corner coordinates would be (something like): > > x1 = 9, y1 = 15 > x2 = 88, y2 = 15 > x3 = 12, y3 = 154 > x4 = 99, y4 = 133 > > > and all pixels of the image interpolated within this new plane. That's not what's normally meant by the term "perspective transformation", although it is a similar transformation. A perspective transformation just makes things that are further away (more negative z, or more positive, depending on convention) smaller in the x and y dimensions. You're making things narrower when they're higher on the screen, and also moving them right or left. You could probably get that result with a conventional perspective transform, followed by a rotation and a shear. But it's rather a strange transformation that I would not expect to be generally useful, so I wouldn't make a special built-in function for it, but let authors construct it themselves if they need it. I certainly wouldn't call it "perspective" because that confuses it with perspective. >> Would dx2,dy2 ever be anything different from -dx1,-dy1? And would the >> last four numbers ever not be 0? > > I crafted above example to reflect your question. Is this what you had been > asking for? > >> One weakness with: >> >> http://www.w3.org/TR/css3-3d-transforms/#perspective >> >> is that it appears you can only define a square frustum, not a >> rectangular one. It ought to have two parameters really-- depth and >> aspect ratio would do. > > Agreed. But still some in-depth knowledge or great powers of imagination > would be required to find the right values. That's why I'd like to suppose > the above alternative. With this alternative setting appropriate values > won't be not so much of a try & error thing. Well, the W3C perspective parameter is a bit strange. I would suggest they make it more like the glu one which everyone is familiar with. See: http://www.opengl.org/sdk/docs/man/xhtml/gluPerspective.xml You sit what you consider an average distance from your monitor, put a ruler on your nose, measure the distance, and using your knowledge of its height and some trigonometry, compute the field of view. Then you set a typical aspect ratio and some sensible numbers for zNear and zFar so as not to clip the objects in your scene, and Bob's your uncle. Angle and aspect ratio would do fine for the W3C transform. |