We Keep Coding

jquery move needle image in speedometer

I have a background image that is a speedometer.
I need to point the needle to the correct spot. It does not need to be animated, but I will have to take into consideration where the needle needs to point at in the half circle, based on the value (speed).
I am not looking for an answer, but for some help identifying some jquery libraries that will help me accomplish this.

GSAP (http://www.greensock.com/get-started-js/) is a great library - I know you're not wanting to animate it, but with the library, you get tonnes of transforming options all of which are miles ahead of standard jQuery and CSS3 properties.
In addition to affording you the ability to place your elements in unique positions, you can easily animate them should you ever desire to do so in the future.
As per the speed listening function;
Set an empty JS var (speed)
On key press (arrow key, for example), increase the speed var +1
Listen for changes in the speed var, then adjust up/down the speedometer needle.

CSS3 Tweens and Matrix

I've put together some key frame animations in CSS which animate a div from one side of the screen to the other, applying a slight rotation along the way. I'm finding the key frame approach restrictive because I want to be able to have many variations that go into one big sequence. The variations could as an example be not just left to right, right to left but also up to down and so on. To add more complexity to the problem, I need to be able to shuffle up this sequence and retain continuity between each animation.
The sequence itself should be able to run in any order and reset.
For example if I want to move the div in 100px phases:
left (100px), up (100px), left (100px) and then down(100px)
the next time I might want the sequence as follows (again 100px):
left, down, right, up
My thinking is that this would be better achieved by using JavaScript to write the animations on the fly perhaps using something like the CSS3 Matrix. So far I've figured out the easy stuff like left and right but I can't figure out how to add in rotation. This seems like a really good starting point:
http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/
http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/
Also been taking a look at this:
http://tweenjs.com/
My thoughts are, a) am I over-complicating this by taking the CSS Matrix approach? Is there something simpler? and b) How can I achieve rotation and movement at the same time using the CSS Matrix or any other approach?
Any help appreciated!

If you want to do dynamic animations, then you should be using JavaScript to animate.
As far as how to combine translation with rotation, the answer is right there in the useragentman post (which incidentally is a very good introduction to css matrixes.)
Take the angle of rotation (in radians) that you want to achieve and create the following matrix:
Cos(angle), -Sin(angle), 0
Sin(angle), Cos(angle), 0
0, 0, 1
then create the following matrix for your (presumably 2D) movement in x and y.
0,0,X
0,0,Y
0,0,1
Then multiply them together (or take the dot product in matrix terminology). Here is a handy matrix multiplier for you, the details of how to create a dot product are also in the same post.
Note that these are transforms (not position changes) and transforms don't affect affect page position.

How to get screen position of CSS3-3d transformed elements?

I have a very complicated site built on CSS3 that has html elements 3d-transformed, rotated, flipped, flopped and just generally distorted.
I'm trying to figure out the on-screen location of one of these elements and don't see any way to do so. I was wondering if anyone has any ingenious ideas.
Alternatively, if anyone can explain the math behind -webkit-perspective, I can figure out the position as that's the only thing I'm not sure how to model.

Have you tried using getBoundingClientRect()?
I've used it successfully in the past to calculate the dimensions of elements that have been transformed with the transform property.

The problem is, that the CSS3 transformations doesn't actually change the position of the elements in anyway. Of course the browsers "know" that they are repositioned, because it renders them, but this information is not provided back to the DOM/API.
The only thing I can think of, is to calculate the positions based on the transformations yourself, since these are "simple" matrix transformations.
Unfortunately Algebra class has been too long ago, that I can't tell you anymore how to do it - only that it is possible.

Using getBoundingClientRect is a good idea but will only give you the coordinates of the rectangle that contains your shape, not the exact coordinates of the 4 topleft, bottomright, bottomleft, topright corners.
You'd only be able to do this by taking each of those non-transformed coordinates and applying the transform via javascript.

Between SVG and canvas, which is better suited for manipulating/animating several images? Maybe neither and just use css3 transforms?

The 2nd part of the question is, which javascript library is better/easier to manipulate images with? I won't be actually drawing any shapes or anything. Other info: I'll be using jQuery and don't need to support all browsers, just webkit.
Edit:
More information: the current design is to layout/draw several rows/columns of images in a grid-like layout, with the image in the center being in "focus" (a little larger, with a border or something and some text next to it). The tricky thing is that we want the whole canvas of images to appear to slide/glide over to bring another random image into focus. So obviously the number of images in this grid needs to exceed what is visible in the viewport so that when the transition occurs there are always images occupying the canvas. Other than moving the images around, I won't be blurring them or otherwise modifying them. Eventually we will add user interactions like clicking/touching on a visible image to bring it to focus manually.
Let me know if this is not clear or still confusing.
I ran across scripty2 which seems like an alternative to using canvas/SVG for my purposes. I also started farting around with EaselJS last night, and it seems like this might work, but I'm wondering if it'll end up being more work/complex than just using standard HTML/CSS and a tool like Scripty2 to aid with animations and click/touch events. Just looking for any suggestions. Thanks!

The answer depends on your manipulation and animation.
If it's just translations, CSS wins for speed compared to canvas. I haven't tested, but I feel confident it easily beats SVG for the same sort of thing.
If you're going to be doing non-affine transformations or otherwise messing with the images (e.g. blurring them) you clearly want Canvas.
If you need event handlers per object, you clearly want a retained-mode drawing system like SVG or HTML+CSS. I haven't done enough CSS3 transforms to say how they compare in terms of speed to SVG, but they clearly do not have the robust transformation DOM of SVG.
This is a rather subjective question (or suite of questions) and you haven't yet given sufficient information for a clear answer to be possible.

Div positioning on a canvas with arrows bindings

I'm searching for a little piece of javascript that can attach to a div (in data-x data-y attributes for example) the x,y coordinates of a draggable div. And then be able to draw arrows between them (using a data-targetid attribute?).
If the solution can look like a simple version of graphview, jsPlumb or vizster but without the complicated library, and only in javascript/html

There is a jQuery version of jsPlumb, looks like it's 14kb. What you're trying to do isn't default functionality, you're going to need a (somewhat complicated) library to accomplish it. If you're concerned with code bloat I'd start with the source code of jsPlumb and start pulling out what you don't need.