Transforms

transform() as setter

returns itself
animate yes

As a setter it has two ways of working. By default transformations are absolute. For example, if you call:

element.transform({ rotation: 125 }).transform({ rotation: 37.5 })

The resulting rotation will be 37.5 and not the sum of the two transformations. But if that's what you want there is a way out by adding the relative parameter. That would be:

element.transform({ rotation: 125 }).transform({ rotation: 37.5, relative: true })

Alternatively a relative flag can be passed as the second argument:

element.transform({ rotation: 125 }).transform({ rotation: 37.5 }, true)

Available transformations are:

  • rotation with optional cx and cy
  • scale with optional cx and cy
  • scaleX with optional cx and cy
  • scaleY with optional cx and cy
  • skewX with optional cx and cy
  • skewY with optional cx and cy
  • x
  • y
  • a, b, c, d, e and/or f or an existing matrix instead of the object

transform() as getter

returns value

The transform() method acts as a full getter without an argument:

element.transform()

The returned object contains the following values:

  • x (translation on the x-axis)
  • y (translation on the y-axis)
  • skewX (calculated skew on x-axis)
  • skewY (calculated skew on y-axis)
  • scaleX (calculated scale on x-axis)
  • scaleY (calculated scale on y-axis)
  • rotation (calculated rotation)
  • cx (last used rotation centre on x-axis)
  • cy (last used rotation centre on y-axis)

Additionally a string value for the required property can be passed:

element.transform('rotation')

rotate()

returns itself
animate yes

The rotate() method will automatically rotate elements according to the center of the element:

// rotate(degrees)
rect.rotate(45)

Although you can also define a specific rotation point:

// rotate(degrees, cx, cy)
rect.rotate(45, 50, 50)

skew()

returns itself
animate yes

The skew() method will take an x and y value:

// skew(x, y)
rect.skew(0, 45)

scale()

returns itself
animate yes

The scale() method will take an x and y value:

// scale(x, y)
rect.scale(0.5, -1)

translate()

returns itself
animate yes

The translate() method will take an x and y value:

// translate(x, y)
rect.translate(0.5, -1)
Fork me on GitHub