I'm trying to create a grid of cubes that have a perspective that looks like you're looking at them from the top. Here is an example
http://imgur.com/elyJ5tu
This one is made by calculating how far the cube is from the middle and changing the border size. I want to make my own texture on the sides of the cube so I used CSS3 rotation to create the six sides of the cube and position them correctly to form a cube. Now I tried to recreate the effect by having the cubes tilt over the x and y axis depending on how far they are from the center and i got this:
http://codepen.io/anon/pen/yKmwg
As you can see it looks like they're on some kind of spherical surface. This is because the front and back side of the cube should not be rotating. Does anyone know of the proper way to do this. Thanks
Thank you #jozzas perspective origin was what i was looking for:
http://codepen.io/avovk/pen/yICrt
Related
I am trying to write an equation to re-calculate the transform-origin of a map when clicking on a particular key point using a combination of jQuery and the "transform-origin" CSS property.
To further clarify, I have a number of key points plotted on a map and would like to zoom into any given point by re-calculating the origin of my map based on the "left%" "top%" position coordinates of my key points.
My key points are absolutely positioned based on "left%" and "top%" and I am using the transform CSS property to scale the map x4 when clicking any given keypoint.
Any help figuring out this logic would be greatly appreciated.
Thank you.
i think its related to this: JavaScript Image zoom with CSS3 Transforms, How to calculate Origin? (with example) have a look
with an useful answer right here: http://doctype.com/javascript-image-zoom-css3-transforms-calculate-origin-example
I am projecting a rectangle on a table with a beamer and I want to calculate the absolute position of the beamer in the space from the destortion of this rectangle. I know the absolute position (in 3D) of all the corners of the rectangle that is projected on the table.
I dont know how to get started with this and cannot find much usefull info on the internet.
Can someone provide some tips please?
It depends on what you know. I'll choose the easiest:
If you know the position of the original rectangle, just find the intersection of the lines that go through the matching corners.
I am fiddling around with CSS3 perspectives & transformations. Starting from this great 3D cube example, I would like to modify the cube such that it does not just rotate around its center, but roll over its edges.
I got the first left tilt working by rotating the cube around the z-axis, with -webkit-transform-origin: bottom left (see fiddle; example limited to left tilts for simplicity). For a subsequent left tilt, I am struggling how to further adjust the origin. Conceptually, I would need to set the origin relative to the parent container (i.e. for consecutive left tilts, it should gradually wander to the left in 200px steps).
Any help is greatly appreciated!
I've had a go at this and I think you'll need to look into the css matrix transformations available to you to get exactly what you want.
Unfortunately it's not as simple as rotate, then move transform origin.
What happens is the cube is rotated around that edge, but then if you move the point of transform it applies the previous transform to the cube using this new point of origin.
What's more you need to also translate the position of the cube. You can't move it along purely using rotations.
Matrices should solve all of this I think (I don't know an awful lot about them I'm afraid)
You can see the modified jsfiddle I created where the cube is rotated and translated.
The point of translation is the center though, so it doesn't look like the cube is "rolling".
here's the crucial extra code:
...
//left
zAngle -= 90;
xPos -= 50;
//rotate and translate the position of the cube
$('#cube')[0].style["WebkitTransform"]="translateX("+xPos+"px) rotateZ("+zAngle+"deg)";
...
js Fiddle here: http://jsfiddle.net/DigitalBiscuits/evYYm/20/
Hope this helps you!
I think this tutorial may help you.
http://desandro.github.io/3dtransforms/docs/cube.html
If you want to roll over its edges, just rotateZ and translateX. but how fast you want rotate, you may have to caculate it.
http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html
I have a rectangle of any arbitrary width and height. I know X,Y, width, and height. How do I solve the upper right hand coordinates when the rectangle is rotated N degrees? I realized if it were axis aligned I would simply solve for (x,y+width). Unforunatly this doesn't hold true when I apply a transform matrix on the rectangle to rotate it around its center.
It's usually easiest and fastest to let Flash's display code do these kinds of things for you. Create an empty Sprite and put it inside the rectangle's display object at the corner you want to track. Then, find the location of that sprite in the coordinate space of your choice:
var p:Point = new Point(0,0);
myRectangle.myCornerSprite.localToGlobal( p );
someDisplayObject.globalToLocal( p ); // for a coord space besides the stage
This gets you out of making any assumptions about the rectangle's design (i.e. registration point), and works even if the rectangle should be skewed or scaled as well as being rotated. Plus, this will be much easier to implement and maintain then a mess of cosines and whatnot.
(Note that the code above assumes that "upper right" refers to a specific corner - if you want to examine whichever corner happens to upper-rightmost at the moment, I'd simply add do the same thing with a sprite at all four corners, and pick whichever is to the upper right in global coords.)
You just have to calculate the point on a circle for the given radius. The center of your rectangle will be the circle's origin and any corner will be a point on the circle's circumference. You need to use trigonometry to calculate the new point using the rotation. I don't have time right now to explain all this, but here is a link to a decent 2D Javascript library I've used in the past and which should give you everything you need (bearing in mind that the math is virtually the same in Javascript and ActionScript) to work it out for yourself.
http://jsdraw2d.jsfiction.com/viewsourcecode.htm
I have a problem on roating an Image on a canvas in gdi+, I am using the following code, however I find there are alias on the edge.
myPathMatrix.Rotate(GetDCAngle(), MatrixOrderAppend);
myPathMatrix.Translate(
GetDCX(),
GetDCY(),
MatrixOrderAppend);
canvas->SetTransform(&myPathMatrix);
canvas->Draw(XXX);
I used the following code to remove the alias, but failed.
canvas->SetInterpolationMode(InterpolationMode::InterpolationModeHighQualityBicubic);
canvas->SetSmoothingMode(SmoothingModeAntiAlias);
How can I remove the alias at rotated image's edges.
Many thanks!
It's been a while since I worked with GDI+, but I'd assume there's no effective option to remove antialiasing around the edges when rotating. The reason is basically that pixels are square. To rotate an image an amount other than a multiple of 90 degrees, you need to use some kind of interpolation to estimate pixel colours where there weren't really pixels before.
So if there's nothing in the library to specifically take away antialiasing around the edges, have you thought about drawing hard lines in the background colour along the borders? It should be easier to draw those lines without any antialiasing.