>

and to change slides. 2 for comments. estelle.github.com/CSS-Workshop

CSS: from Knowledgable to Ninja

◈ Estelle Weyl

@estellevw

www.standardista.com

Part 10: Transforms

Tranforming Elements

.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()>];
}

2D Transform Functions

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 Function: Translate

transform: translate(100px, 100px);
transform: translateX(100px);
transform: translateY(100px);

Transform Function: Rotate

transform: rotate(90deg);

Transform Function: Scale

transform: scale(0.25, 0.75);
transform: scale(0.75);
transform: scaleX(0.25);
transform: scaleY(0.75);

Transform Function: Skew

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

transforms

  • Chrome
  • Safari
  • Firefox 3.5
  • Opera 10.5
  • IE 9
  •   some with vendor prefix
  • Vendor prefix -webkit and -ms
  • Transforms create a new stacking context
  • Take advantage of transform-origin
  • Multiple values are SPACE separated (no commas)
  • 3D transforms are hardware accelerated
  • Play with Westciv's Transform Tool
  • Matrix is another syntax
  • More about transforms
  • Play Time

    Try it out

    transform-origin property

    Specifies the x and y position of the origin, relative to the transform object.

    • Keyword positions: left, right, bottom, top, center
    • Length values
    • Percentage values
    • default is 50% 50% (or center center)
    • Supported in all browsers that support transform. Prefixed if transform is prefixed

    Play Time

    Try it out

    3d Transforms

    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 Function: perspective

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

    Only relevant to 3D transformations

    perspective-origin property

    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%)

    Other Transform related Properties

    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.

    Play Time

    Try it out

    backface-visibility

    hidden or visible

    1
    2
    3
    4
    5
    6

    Part 11: Transitions & Animation

    Next ➹