Widely availableSupported across all major browsers. Safe to use in production.
Animation Widely available

Individual transform properties

The translate, rotate, and scale CSS properties apply single transformations independently, as opposed to applying multiple transformations with the transform CSS property.

Animation

Overview

The translate, rotate, and scale CSS properties apply single transformations independently, as opposed to applying multiple transformations with the transform CSS property.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
rotate
104
104
72
14.1
104
14.5
none
104
104
72
14.1
104
14.5
x y z angle

x, y, or z axis name plus angle value
104
104
72
14.1
104
14.5
Other
css.properties.scale

The scale CSS property allows you to specify scale transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.
104
104
72
14.1
104
14.5
CSS property
none
104
104
72
14.1
104
14.5
Other
css.properties.translate

The translate CSS property allows you to specify translation transforms individually and independently of the transform property. This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.
104
104
72
14.1
104
14.5
CSS property
none
104
104
72
14.1
104
14.5
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.card {
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
  transition: translate 0.3s ease, rotate 0.5s ease, scale 0.2s ease;
}

.card:hover {
  translate: 0 -10px;
  rotate: 3deg;
  scale: 1.05;
}

Live demo

Translate individualspecified

Individual transform properties (translate, rotate, scale) Translate individualspecified demo.

PreviewFullscreen

Rotate individualspecified

Individual transform properties (translate, rotate, scale) Rotate individualspecified demo.

PreviewFullscreen

3 simultaneous(hover)

Individual transform properties (translate, rotate, scale) 3 simultaneous(hover) demo.

PreviewFullscreen

Use cases

  • Using Individual transform properties

    The translate, rotate, and scale CSS properties apply single transformations independently, as opposed to applying multiple transformations with the transform CSS property.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features