In Blend, transformations live down on the very appropriately named Transform section of the Propeties panel;

where there’s some fairly simple stuff that you can do and some more complex stuff. This is often used a lot whilst building animations or state-transitions.

As you work with an item on the artboard, there’s a very natural but slightly odd difference between what happens if you;

1. move the object around which will change either its position or its margin – it will not alter any render transform
2. size the object which will change its width, height – it will not alter any render transform
3. change its rotation which will set the object’s render transform to include a rotation factor
4. skew the object which will, again, set the object’s render transform to include a skew factor and a translation factor

but (1) and (2) change if you’re in animation recording mode where they do start to affect the render transform. This is 99.9% what you want but it is a bit of an anomaly.

I always find this panel a little unintuitive because it’s one of the few panels like this in Blend where I can use an “Advanced Options” button, i.e. this thing;

in so many places. I can use it to do the usual;

[Reset/Make Resource/Apply Resource/Data Bind/Element bind] and I can do that at the level of the whole transformation or at the level of an individual part of it which is why I always get a bit dazzled by the array of options.

Most of this is pretty intuitive stuff with the separate tabs for translate, rotate, scale, skew, center and flip;

where the center affects the RenderTransformOrigin property and can equally be altered by dragging around the little “dot” in the middle of your element, i.e.;

and that centre point is going to affect various transformations like rotation. The Flip tab is interesting as it allows for doing “shadow like” transformations as I can very easily insert a rectangle underneath that image, set the Fill on the rectangle to be an image brush with the source bound to the same image and then use the flip button to flip it vertically and then skew it to make a shadow.

What’s not so obvious to me is the meaning of “Use relative values”. What’s that about? It means that you’re using a value relative to the current value of the property and it’s perhaps more useful for building an animation. A quick example – let’s say I have a storyboard and I want to rotate this object by 30 degrees at 1 second so I drag the playhead on my animation to 1 second and set the angle to 30 degrees;

now what if I want to animate it 45 degrees more by 3 seconds? The simple way is to drag the playhead to 3 seconds, click the “use relative values” setting, type 45 into the box and hit apply;

The other side of the Transform panel is about projections where you can apply perspective transforms to content. There’s the little trackball on the left hand side that you can drag around;

but it’s pretty tricky to do anything precise with that so I usually end up typing in numbers. On the second tab we define the centre for rotation as a 0..1 value relative to the width/height of the object itself and then on the first tab we rotate round the X, Y, Z axes.

For instance, I’ve put this image in the centre of the artboard. If we rotate it around the X axis with the centre point for the Y axis set to 0, 0.5 and 1.0 then we’ll see these 3 rotations;

the other 2 tabs add a little further bit of fun in that they let you set up the global or local offsets. These come straight through from the underlying PlaneProjection class;

• local offset to me means that we apply any rotation to the object and then we offset it around the X, Y, Z axis by the amounts specified but those X, Y, Z axes are similarly rotated with the plane
• global offset means that we use the standard X, Y, Z axes without rotation when applying the offsets

As a way of illustrating, these objects have all been rotated 45 degrees around the Y axis and then locally offset along the X axis and along the Z axis;

whereas these objects are using global offsets;

There’s lots of fun to be had in that transform panel and especially when working out how to transform elements for particular visual states – a few fairly simple primitives go a long way.