Learning Code

2D Transform

The Syntax

selector {transform: value(# or deg);}

Values:

Rotate:

this allows you to rotate an element or image out of its default position by a number of degrees. This can be a positive or negative value.

More +Less —

The gradient on the left was rotated a negative value. Negative values rotate counter-clock-wise.

This rotation uses a positive value. Positive values rotate clock-wise.

Scale:

this allows you to resize an image or element. This is more helpful in conjuction with an animation than by itself.

More +Less —

The first number value represents width. The second number value represents height. The width is 1x larger and the height is 2x larger.

Decimal values allow the width and height of the element to be decreased.

SkewX:

this distorts the shape of your element along the x-axis.

More +Less —

A negative degree value skews to the left.

A positive degree value skews to the right.

SkewY:

this distorts the shape of your element along the y-axis.

More +Less —

A negative degree value shifts the element down the left side, leaving the right side in its default position.

A positive degree value shifts the element down at the right side, leaving the left side in its default position.

Translate:

this moves your element along the x or y axis.

More +Less —

A negative width value moves left. A negative height value moves up.

A positive width value moves to the right. A positive height value moves down.

Matrix:

allows you to combine the different transform values together. Matrix uses 6 values that represent the different transform values.

More +Less —

Decimals, positive, and negative numbers can be used. There are complex mathmatical formulas that use arrays that can help you be precise to the pixel. There are also sites with matrix generators to create the code for you. Otherwise this is a matter of experimentation and guesswork.

Value 1 = scale of width
Value 2 = skewY
Value 3 = skewX
Value 4 = scale of height
Value 5 = translate horizontally
Value 6 = translate vertically


Rotate is not a value by itself but a combination of skewX and skewY can also create the rotation effect. Use 0 as the value to prevent an unwanted tranformation.

3D Transform

3D transformations create an illusion of 3-dimensional space by utilizing the z-axis in conjuction with the x-axis and y-axis. By themselves, 3D transformations look very flat. However, combining them with animation or transitions does create a 3-dimensional effect. Keep in mind that 3D transformations are not as widely supported as 2D tranformations.

The Syntax

selector {transform: value(# or deg);}

Values:

RotateX:

this flips your element along the horizontal axis.

More +Less —

Horizontal rotation

Notice the gradient is going a different direction and the text is flipped too.

RotateY:

this flips your element along the vertical axis.

More +Less —

Vertical rotation

Again the text is flipped too. The size is also different due to the angle of rotation.

RotateZ:

this moves the element along the z-axis.

More +Less —

Z rotation

This rotation follows the z-axis.

Rotate3d:

this allows you to rotate along each axis.

More +Less —

figure {-webkit-transform: rotate3d(50, 10, -60, -100deg);
transform: rotate3d(50, 10, -60, -100deg);}

The values represent x-axis, y-axis, z-axis and the degrees of rotation

More

Additional values include: matrix3d, translate3d, translateX, translateY, translateZ, scale3d, scaleX, scaleY, scaleZ, and perspective

Additional properties include: transform-origin, transform-style, perspective, perspective-origin and backface-visibility