Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

transform

Introduction

The transform CSS property lets you rotate, scale, skew, or translate an element.

Examples

css-apisrc/transform/App.tsx
Preview

Syntax

/* Function values */
transform: rotate(0.5turn);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3px);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);

// equal to transform: translate(50px, 100px);
transform: matrix(1, 0, 0, 1, 50, 100);
// equal to transform: translateX(100px);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 0, 0, 1);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: translate3d(10px, 0, 20px) rotateY(3deg);

The value of the transform can be one or more <function>, which are separated by spaces. For details, see function standard syntax

function standard syntax

  • translate
translate( <length> | <percentage> , <length> | <percentage>? )
  • translateX
translateX( <length> | <percentage> )
  • translateY
translateY( <length> | <percentage> )
  • translateZ
translateZ( <length> )
INFO

When using translateZ, it is recommended to set flatten={false} on the parent node of the node, otherwise it may cause the overflow:hidden of the parent node to fail on Android. At the same time, if translateZ does not take effect on Android, you can try to set other sibling nodes of the same parent node to transform: translateZ(0).

  • translate3d
translate3d( <length> | <percentage> , <length> | <percentage> , <length> )
  • rotate
rotate( [ <angle> | <zero> ] )
  • rotateZ
rotateZ( [ <angle> | <zero> ] )
  • rotateX
rotateX( [ <angle> | <zero> ] )
  • rotateY
rotateY( [ <angle> | <zero> ] )
  • scale
scale( <number> , <number>? )
  • scaleX
scaleX( <number> )
  • scaleY
scaleY( <number> )
  • skew
scale( [ <angle> | <zero> ], [ <angle> | <zero> ] )
  • skewX
scaleX( [ <angle> | <zero> ] )
  • skewY
scaleY( [ <angle> | <zero> ] )
  • matrix
matrix(a, b, c, d, tx, ty)
  • matrix3d
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4);
INFO

  • matrix(a, b, c, d, tx, ty) is shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).

  • The matrix3d() function is specified with 16 arguments. These parameters are described in column-dominated order.

    • a1, b1, c1, d1 define the first vector and are responsible for the X-axis scaling, rotation, and shear transformations;
    • a2, b2, c2, d2 define the second vector and are responsible for the Y-axis scaling, rotation, and shear transformations;
    • a3, b3, c3, d3 define the third vector and are responsible for the Z-axis scaling, rotation, and shear transformations;
    • a4, b4, c4, d4 define the third vector, a4, b4 and c4 realize the translation transformation of x, y and z axes, and d4 is generally set to 1, which is a value to keep the calculated weight stable.

Formal definition

Initial valueempty value
Applies toall elements
Inheritedno
Animatableyes

Note

INFO

  • If you want 3D effect when transform rotateX and rotateY rotate, you need to cooperate with perspective property.

  • On iOS, if there is jaggedness in rotate, anti-aliasing can be turned on by adding the allow-edge-antialiasing attribute to the node.

<view allow-edge-antialiasing={true}></view>
  • iOS will penetrate other sibling nodes in the same layer when rendering rotateX/rotateY. If you do not want this penetration effect, wrap the node with a Wrapper View so that it is not in the same layer as its sibling nodes. Since an empty Wrapper View will be optimized and deleted by layout only, without generating an actual node, please add a default transform property value to the Wrapper View (e.g. transform: translate(0,0)) to prevent it from being layout only.
INFO

  • The transform property is order-dependent, and the order of translate, rotate, and scale will affect the final rendering effect.

  • The table below shows whether Lynx considers the order of transform in various scenarios:

ScenarioConsideration of Transform Order
Static transform in AndroidYes
Static transform in iOSYes
Transform in AndroidYes
Transform in iOSYes
  • What is a static transform: It refers to the transform property that is rendered directly without animation in CSS.

Difference from W3C

  • not support rotate3d, scale3d

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.