Consider this demo: https://jsfiddle.net/s2Lngpto/1/
I have a spinner, and I would like it to spin every time not 360 degrees around but 315 degrees (and go in full cycle in 8 rotations), and CSS is behaving really weirdly. From what I understood, if you specify for example rotate(315deg), it should move to the position -45 degrees of the current position. But instead if moves through the longest path to the right. Okay.. I guess that's just how CSS works, if you specify positive integers it will rotate right, if negative - left? Right... right?
Nope, I've specified the position 270 degrees, and on the second stage it rotates left instead of right
Am I doing something wrong? What is the easiest way to achieve what I want?
As u have awnsered yourself:
in one direction(right):
transform: rotate(10deg)
in the other direction(left):
transform: rotate(-10deg)
It probably has to do with your animation, when you have the attribute animation: alternate for example it tends to do as u described. Could u provide some code?
Related
Every time I create a sprite to use as css background-image, I have to crunch the math and remind myself how to remember the X and the Y coordinates in pixels. How can I remember it or see it visually to keep it straight?
I came up with this graphic, hope it's helpful to someone else as well.
Think 'Y' rhymes with 'SKY' so thats your top measurement (distance in px) from the top. That leaves 'X' as the remaining distance (distance from left in pixels)
When I say distance from left and distance from top, I am referring to the distance in pixels from the side of your overall image to when the part you want to show, begins.
I usually keep the images anywhere on the Sprite sheet and then check out there co-ordinates by clicking on each graphic element in Fireworks(i use fireworks) and then negating the co-ordinates. For eg:if an element is at x=23px and y=20px, then in the CSS, i use background-position:-23px -20px. This always does the work.
I have asked this before but my math is so bad I still don't understand. I need to know what side of the screen* (top, left, bottom, right) the arrow is pointing to so I can handle dragging activity inside the divs.
This fiddle (code is a mess and it only works in safari/chrome) illustrates the problem. To be clear, the calculation for where the arrow points should come from the exact center of the cube, not the arrow itself. If you can offer some clues about the math I'll do the work and post it here.
*"Side of the screen" means, what angle it is or what hour it would be pointing to if the screen is a clock.
transform: rotateX(ndeg) rotateY(ndeg) rotateZ(ndeg);
In this example, the arrow is pointing between 4 o'clock and 5 o'clock.
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'm having difficulty rotating an item a full 360 degrees in webkit using CSS transitions.
I've created a JS Fiddle to show what I'm trying to do: http://jsfiddle.net/russelluresti/PnTk8/2/
The transition should happen in 2 steps. First, the item should just rotate along the Y axis for a 1/2 turn. Then, once that transition is complete, it should rotate the opposite direction a full turn and scale down to 1/2 the original size. The problem I'm having is that the second transition is only scaling and not rotating, even though rotate values of rotateY(-360deg) and rotateY(0deg) should cause a full rotation.
This is just a proof-of-concept, so I'm only targeting webkit at the moment. However, I'd like to stick with transitions, and not keyframe animations. Any ideas?
In my knowledge, rotate from rotateY(-180deg) to rotateY(-360deg) would be as the same state as rotateY(0). Let's put it this way: imagine you flip a piece of paper twice in the same direction, would be totally the same state as the very beginning. As a result, the browser take it for 'no changes at all', therefore no transition upon the rotation.
another example would make this even clearer:
given deg. set to your case, rotateY(-90deg) => rotateY(-300deg) => rotateY(60deg) would work just the same, the second transition won't start. Becuz relative to the original state: rotateY(0), rotateY(-300deg) is just at the same state as rotateY(60deg).
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