sketch - v4.1.0

sketch/css/transform

transform helps you write CSS transforms function, in a fully type-safe way. Every transform functions are implemented.

MDN Reference

Types

Transform

opaque </>

The <transform-function> CSS data type represents a transformation that affects an element’s appearance. Transformation functions can rotate, resize, distort, or move an element in 2D or 3D space. It is used in the transform property.

MDN Reference

pub opaque type Transform

Functions

matrix

</> 
pub fn matrix(
  a: Float,
  b: Float,
  c: Float,
  d: Float,
  tx: Float,
  ty: Float,
) -> Transform

The matrix() CSS function defines a homogeneous 2D transformation matrix.

transform.matrix(a, b, c, d, tx, ty)

is a shorthand for

transform.matrix_3d(#(
   #(a,  b,  0,  0),
   #(c,  d,  0,  0),
   #(0,  0,  1,  0),
   #(tx, ty, 0,  1)
))

MDN Reference

matrix_3d

</> 
pub fn matrix_3d(
  values: #(
    #(Float, Float, Float, Float),
    #(Float, Float, Float, Float),
    #(Float, Float, Float, Float),
    #(Float, Float, Float, Float),
  ),
) -> Transform

The matrix3d() CSS function defines a 3D transformation as a 4x4 homogeneous matrix.

MDN Reference

perspective

</> 
pub fn perspective(x: Length) -> Transform

The perspective() CSS function defines a transformation that sets the distance between the user and the z=0 plane, the perspective from which the viewer would be if the 2-dimensional interface were 3-dimensional.

MDN Reference

rotate

</> 
pub fn rotate(value: Angle) -> Transform

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it.

MDN Reference

rotate_3d

</> 
pub fn rotate_3d(
  x: Float,
  y: Float,
  z: Float,
  value: Angle,
) -> Transform

The rotate3d() CSS function defines a transformation that rotates an element around a fixed axis in 3D space, without deforming it

MDN Reference

rotate_x

</> 
pub fn rotate_x(x: Angle) -> Transform

The rotateX() CSS function defines a transformation that rotates an element oarend the x-axis (horizontal) without deforming it.

rotateX(a) is equivalent to rotate3d(1, 0, 0, a).

MDN Reference

rotate_y

</> 
pub fn rotate_y(y: Angle) -> Transform

The rotateY() CSS function defines a transformation that rotates an element oarend the y-axis (vertical) without deforming it.

rotateY(a) is equivalent to rotate3d(0, 1, 0, a).

MDN Reference

rotate_z

</> 
pub fn rotate_z(y: Angle) -> Transform

The rotateZ() CSS function defines a transformation that rotates an element oarend the z-axis without deforming it.

rotateZ(a) is equivalent to rotate3d(0, 0, 1, a).

MDN Reference

scale

</> 
pub fn scale(x: Float, y: Float) -> Transform

The scale() CSS function defines a transformation that resizes an element on the 2D plane. Because the amount of scaling is defined by a vector [sx, sy], it can resize the horizontal and vertical dimensions at different scales.

The scale() function only scales in 2D. To scale in 3D, use scale3d() instead.

MDN Reference

scale_3d

</> 
pub fn scale_3d(x: Float, y: Float, z: Float) -> Transform

The scale3d() CSS function defines a transformation that resizes an element in 3D space. Because the amount of scaling is defined by a vector [sx, sy, sz], it can resize different dimensions at different scales.

MDN Reference

scale_x

</> 
pub fn scale_x(x: Float) -> Transform

The scaleX() CSS function defines a transformation that resizes an element along the x-axis (horizontally).

scaleX(sx) is equivalent to scale(sx, 1) or scale3d(sx, 1, 1).

MDN Reference

scale_y

</> 
pub fn scale_y(y: Float) -> Transform

The scaleY() CSS function defines a transformation that resizes an element along the y-axis (vertically).

scaleY(sy) is equivalent to scale(1, sy) or scale3d(1, sy, 1).

transform: rotateX(180deg); === transform: scaleY(-1);

MDN Reference

scale_z

</> 
pub fn scale_z(y: Float) -> Transform

The scaleZ() CSS function defines a transformation that resizes an element along the z-axis.

scaleZ(sy) is equivalent to scale3d(1, 1, sy).

MDN Reference

skew

</> 
pub fn skew(x: Angle, y: Angle) -> Transform

The skew() CSS function defines a transformation that skews an element on the 2D plane.

MDN Reference

skew_x

</> 
pub fn skew_x(x: Angle) -> Transform

The skewX() CSS function defines a transformation that skews an element in the horizontal direction on the 2D plane.

MDN Reference

skew_y

</> 
pub fn skew_y(x: Angle) -> Transform

The skewY() CSS function defines a transformation that skews an element in the vertical direction on the 2D plane.

MDN Reference

translate

</> 
pub fn translate(x: Length, y: Length) -> Transform

The translate() CSS function repositions an element in the horizontal and/or vertical directions.

MDN Reference

translate_3d

</> 
pub fn translate_3d(x: Length, y: Length, z: Length) -> Transform

The translate3d() CSS function repositions an element in 3D space.

MDN Reference

translate_x

</> 
pub fn translate_x(x: Length) -> Transform

The translateX() CSS function repositions an element horizontally on the 2D plane.

MDN Reference

translate_y

</> 
pub fn translate_y(y: Length) -> Transform

The translateY() CSS function repositions an element vertically on the 2D plane.

MDN Reference

translate_z

</> 
pub fn translate_z(y: Length) -> Transform

The translateZ() CSS function repositions an element along the z-axis in 3D space, i.e., closer to or farther away from the viewer.

MDN Reference

✨ Search Document