transform-origin

The transform-origin property is used in conjunction with CSS transforms, letting you change the point of origin of a transform.

.box {
  transform: rotate(360deg);
  transform-origin: top left;
}

As indicated above, the transform-origin property can take up to two space-separated …

Avatar of Chris Coyier
Chris Coyier on (Updated on )

transform

The transform property allows you to visually manipulate an element by skewing, rotating, translating, or scaling:

.element {
  width: 20px;
  height: 20px;
  transform: scale(20);
}
Avatar of Sara Cope
Sara Cope on (Updated on )

Flip an Image

You can flip images with CSS! Possible scenario: having only one graphic for an “arrow”, but flipping it around to point in different directions.

.flip-horizontally {
  transform: scaleX(-1);
}

See how one arrow is used to point both directions here:…

Avatar of Chris Coyier
Chris Coyier on (Updated on )