# 2D Transforms

A transform is an effect that lets an element change its shape, size and position

TIP

Use this interactive example page to play with most of the properties and methods discussed below
- Note that you can double-click on a label to reset the related value

The transform methods and transform-related properties are:

methods and properties	description
`translate(unit ,[unit])`,`translateX(unit)`, `translateY(unit)`	move an element on the X and/or Y axis
`rotate(angle)`, `rotateX(angle)`, `rotateY(angle)`	rotate an element around a fixed X, Y point
`scale(nr [, nr])`, `scaleX(nr)`, `scaleY(nr)`	scale an element along the X and/or Y axis
`skew(angle)`, `skewX(angle)`, `skewY(angle)`	skew an element along the X and/or Y axis
`transform-origin: unit, unit`	set the transformation point
`backface-visibility: visible \| hidden`	is the backface visible or not

# translate()

Move an element along the X and/or Y axis
- Positive arguments describe a move to the right/bottom
- Negative arguments move an element left/upwards
You can use units like px, rem, %, ...
translate(arg) with one argument behaves exactly the same as translateX(arg)

EMMET instruction	result	description
`trf:t` + `TAB`	`transform: translate();`	move an element on the X axis (and on the Y axis)
`trf:tx` + `TAB`	`transform: translateX();`	move an element on the X axis
`trf:ty` + `TAB`	`transform: translateY();`	move an element on the Y axis

REMARK

The Emmet instructions mentioned above (and the transform-, transition- and animation-related Emmet instructions in the following chapters) produce some additional lines with vendor prefixes (-webkit-, -moz-, -ms- and/or -o-)

In general, these lines may/should be deleted because all major browsers support transforms, transitions and animations
Or, instead of using Emmet for these (less common) properties, you rely on the suggestions made by your code editor when you start typing

# rotate()

Rotate an element around a fixed point (the default rotation point is center on both the X and Y axis)
- Positive angles rotate clockwise
- Negative angles rotate counterclockwise
The angle can be described as deg (degrees), turn, rad (radians) or grad (gradians)
- The relationship between deg and turn is:
  360deg = 1turn, 180deg = .5turn, 45deg = .125turn, 10deg = .028turn, ...

REMARK

Notice that in a 2D plane, rotateX() and rotateY() result in a squeezed element

EMMET instruction	result	description
`trf:r` + `TAB`	`transform: rotate();`	rotate an element around a fixed point
`trf:rx` + `TAB`	`transform: rotateX();`	rotate an element horizontally around a fixed point
`trf:ry` + `TAB`	`transform: rotateY();`	rotate an element vertically around a fixed point

CHROME TIP

Open the CodePen in full screen
Open DevTools and select the second span tag
Double click on the angle of rotateX()
Use the mousewheel or arrow keys to increment/decrement the value

# scale()

Scale or "zoom" an element along the X and/or Y axis
- Arguments larger than 1 correspond to zooming in
- Arguments smaller than 1 will zoom out
scale(arg) with one argument scales along both the X and Y axis, i.e., it behaves as scaleX(arg) AND scaleY(arg)

EMMET instruction	result	description
`trf:sc` + `TAB`	`transform: scale();`	scale an element along the X axis (and along the Y axis)
`trf:scx` + `TAB`	`transform: scaleX();`	scale an element along the X axis
`trf:scy` + `TAB`	`transform: scaleY();`	scale an element along the Y axis

# skew()

Skew an element along the X and/or Y axis
The angle can be described as deg, turn, rad or grad
skew(angle) with only one angle behaves exactly the same as skewX(angle)

EMMET instruction	result	description
	`transform: skew();`	skew an element along the X axis (and along the Y axis)
`trf:skx` + `TAB`	`transform: skewX();`	skew an element along the X axis
`trf:sky` + `TAB`	`transform: skewY();`	skew an element along the Y axis

# Combining methods

You can combine two or more transform methods by separating them with a space

REMARK: ORDER MATTERS!

Image on the left: transform: rotate(45deg) translateX(70px) means:
first rotate(45deg), then translateX(70px) the already rotated element
Image on the right: transform: translateX(70px) rotate(45deg) means:
first translateX(70px), then rotate(45deg) the already translated element

# transform-origin

Until now, our transformations took place around the default reference or transformation point, which is the center of the element
The transform-origin: x y property can change this transformation point
Possible values are:
- top, center, bottom, left or right
- units like px, % rem, ...
In the example below, all blocks rotate by 10deg but the rotation is not immediately visible as the rotation takes place on the :hover state:
- First block: no value for transform-origin (default is transform-origin: center center)
- Second block: transform-origin: left top
- Third block: transform-origin: right bottom
- Last block: transform-origin: 15% 45%

EMMET instruction	result	description
`trfo` + `TAB`	`transform-origin: ;`	set the transformation point

# backface-visibility

When you rotate an element between 90deg and 270deg around the X and/or Y axis, the backface is by default visible and the content is shown in mirror image
You can easily hide (the backface of an) element with the property backface-visibility: hidden;
In the example below:
- Change the transformY() angle to a value between 0 and 360deg
- Angle between 0 ... 90deg or between 270deg ... 360deg: both span tags are visible
- Angle between 90deg ... 270deg: the second span tag is hidden

span {
    ...
    transform: rotateY(45deg);    /* change value between 0 and 360deg */
}
div:nth-child(2) span {
    backface-visibility: hidden;  /* hidden between 90deg and 270deg */
}

1
2
3
4
5
6
7

EMMET instruction	result	description
`bfv:h` + `TAB`	`backface-visibility: hidden;`	the backface of an element is not visible
`bfv:v` + `TAB`	`backface-visibility: visible;`	the backface of an element is visible