◈ Estelle Weyl

◈ @estellevw

◈ www.standardista.com

1. Selectors
2. Specificity
3. Generated Content
4. Media Queries
5. Debugging
6. Colors & Transparency
7. Fonts / Typography
8. Backgrounds & Borders
9. Gradients
10. Transforms
11. Transitions & Animation
12. Other Features

.plane {
-webkit-transform:
 translate(-90px,300px) rotate(50deg) scale(.7,.9) skew(5deg);
-moz-transform:
 translate(-90px,300px) rotate(50deg) scale(.7,.9) skew(5deg);
-ms-transform:
 translate(-90px,300px) rotate(50deg) scale(.7,.9) skew(5deg);
-o-transform:
 translate(-90px,300px) rotate(50deg) scale(.7,.9) skew(5deg);
transform:
 translate(-90px,300px) rotate(50deg) scale(.7,.9) skew(5deg);
}

selector {
	transform: none | <transFunc()> [<transFunc()>];
}

translate(<length>[, <length>])

specifies a 2D translation by the vector [x, y], where x is the translation-value parameter for the x axis and y is the optional translation value along the y axis. parameter. If y is not provided, y==0.

translateX(<length>)

specifies a translation by the given amount in the X direction.

translateY(<length>)

specifies a translation by the given amount in the Y direction.

scale(<number>[, <number>])

specifies 2D scaling operation by the [sx,sy]. If sy is not provided, sy will equal sx (growsing or shrinking with the same scale). Scale(1, 1) or scale(1) leaves an element in it's default state. Scale(2, 2) or scale(2) causes the element to appear twice as wide and twice as tall as its default size, taking up 4-times the original area.

scaleX(<number>)

specifies a scale operation using the [sx, 1] scaling vector, where sx is given as the parameter.

scaleY(<number>)

specifies a scale operation using the [1, sy] scaling vector, where sy is given as the parameter.

rotate(<angle>)

specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property. For example, rotate(90deg) would cause elements to appear rotated one-quarter of a turn in the clockwise direction.

skewX(<angle>)

specifies a skew transformation along the X axis by the given angle.

skewY(<angle>)

specifies a skew transformation along the Y axis by the given angle.

matrix(<num>, <num>, <num>, <num>, <num>, <num>)

Generally machine generated, specifies a 2D transformation in the form of a transformation matrix of six values. matrix(a,b,c,d,e,f) is equivalent to applying the transformation matrix [a b c d e f].

transform: translate(100px, 100px);

transform: translateX(100px);

transform: translateY(100px);

transform: rotate(90deg);

transform: scale(0.25, 0.75);

transform: scale(0.75);

transform: scaleX(0.25);

transform: scaleY(0.75);

transform: skewX(5deg);

transform: skewY(5deg);

transform: skewX(5deg) skewY(5deg);

transform: skew(5deg,5deg);

translate(<x-length>[, <y-length>])

specifies a 2D translation by the vector [tx, ty], where tx is the first translation-value parameter and ty is the optional second translation-value parameter. If <ty> is not provided, ty has zero as a value.

translate3d(<x>, <y>, <z>)

specifies a 3D translation by the vector [tx,ty,tz], with tx, ty and tz being the first, second and third translation-value parameters respectively.

translateX(<x-length>), translateY(<y-length>)

specifies a translation by the given amount in the X or Y direction.

translateZ(<z-value>)

specifies a translation by the given amount in the Z direction. Note that percentage values are not allowed in the translateZ translation-value, and if present are evaluated as 0.

scale(<number>[, <number>])

specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.

scale3d(<number>, <number>, <number>)

specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.

scaleX(<number>), scaleY(<number>)

specifies a scale operation using the [sx,1,1] or [1,sy,1] scaling vector, where sx or sy is given as the parameter respectively.

scaleZ(<number>)

specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter.

rotate(<angle>)

specifies a 2D rotation by the angle specified in the parameter about the origin of the element, as defined by the transform-origin property.

rotate3d(<number>, <number>, <number>, <angle>)

specifies a clockwise 3D rotation by the angle specified in last parameter about the [x,y,z] direction vector described by the first 3 parameters. If the direction vector is not of unit length, it will be normalized. A direction vector that cannot be normalized, such as [0, 0, 0], will cause the rotation to not be applied. This function is equivalent to matrix3d(1 + (1-cos(angle))*(x*x-1), -z*sin(angle)+(1-cos(angle))*x*y, y*sin(angle)+(1-cos(angle))*x*z, 0, z*sin(angle)+(1-cos(angle))*x*y, 1 + (1-cos(angle))*(y*y-1), -x*sin(angle)+(1-cos(angle))*y*z, 0, -y*sin(angle)+(1-cos(angle))*x*z, x*sin(angle)+(1-cos(angle))*y*z, 1 + (1-cos(angle))*(z*z-1), 0, 0, 0, 0, 1).

rotateX(<angle>)

specifies a clockwise rotation by the given angle about the X axis.

rotateY(<angle>)

specifies a clockwise rotation by the given angle about the Y axis.

rotateZ(<angle>)

specifies a clockwise rotation by the given angle about the Z axis.

skewX(<angle>),skewY(<angle>)

specifies a skew transformation along the X axis or Y axis by the given angle.

skew(<angle> [, <angle>])

specifies a skew transformation along the X and Y axes. The first angle parameter specifies the skew on the X axis. The second angle parameter specifies the skew on the Y axis. If the second parameter is not given then a value of 0 is used for the Y angle (ie. no skew on the Y axis).

matrix(<number>{6})

specifies a 2D transformation in the form of a transformation matrix of six comma separated values. matrix(a,b,c,d,e,f) is equivalent to matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1).

matrix3d(<number>{15})

specifies a 3D transformation as a 4x4 homogeneous matrix of 16 comma separated values in column-major order.

perspective(<number>)

specifies a perspective projection matrix. This matrix maps a viewing cube onto a pyramid whose base is infinitely far away from the viewer and whose peak represents the viewer's position. The viewable area is the region bounded by the four edges of the viewport (the portion of the browser window used for rendering the webpage between the viewer's position and a point at a distance of infinity from the viewer). The depth, given as the parameter to the function, represents the distance of the z=0 plane from the viewer. Lower values give a more flattened pyramid and therefore a more pronounced perspective effect. The value is given in pixels, so a value of 1000 gives a moderate amount of foreshortening and a value of 200 gives an extreme amount. The matrix is computed by starting with an identity matrix and replacing the value at row 3, column 4 with the value -1/depth. The value for depth must be greater than zero, otherwise the function is invalid.

transform: translate3d(0px, 0px, 0px) perspective(0);

Only relevant to 3D transformations

perspective-origin: left;

Sets a horizon point at the given coordinates on the parent element. Changes the perceived vantage point at which the user appears to be looking at child elements.

• Keyword positions: left, right, bottom, top, center
• Length values
• Percentage values (default = 50% 50%)

transform-origin: length | keyterm {1,3}

The centerpoint of the transform

transform-style: flat | preserve-3s

How to handle nested elements are rendered in 3D space.

perspective: none | length

Same as transforms: perspective(value) except it applies to the positioned or transformed children of the element, not the element itself.

perspective-origin: pos relative to parent

Defines the origin for the perspective property. It effectively sets the X and Y position at which the viewer appears to be looking at the children of the element.

backface-visibility: visible | hidden

When an element is flipped, is the content that is flipped away from user visible or not.