support div-transform on web

client/web/divkit/src/components/utilities/Outer.svelte

@@ -30,6 +30,7 @@
     import Actionable from './Actionable.svelte';
     import OuterBackground from './OuterBackground.svelte';
     import { correctCSSInterpolator } from '../../utils/correctCSSInterpolator';
+    import { correctNumber } from '../../utils/correctNumber';
 
     export let json: Partial<DivBaseData & DivActionableData> = {};
     export let origJson: DivBase | undefined = undefined;
@@ -421,6 +422,30 @@
         'has-action-animation': Boolean(actionAnimationTransition)
     };
 
+    $: jsonTransform = rootCtx.getDerivedFromVars(json.transform);
+    let pivotXNum = 0;
+    let pivotYNum = 0;
+    let transformOrigin: string | undefined;
+    let transform: string | undefined;
+    $: {
+        if ($jsonTransform && $jsonTransform.rotation !== undefined) {
+            const pivotX = $jsonTransform.pivot_x || {
+                type: 'pivot-percentage',
+                value: 50
+            };
+            pivotXNum = correctNumber(pivotX.value, pivotXNum);
+            const pivotXCSSValue = pivotX.type === 'pivot-fixed' ? pxToEm(pivotXNum) : `${pivotXNum}%`;
+            const pivotY = $jsonTransform.pivot_y || {
+                type: 'pivot-percentage',
+                value: 50
+            };
+            pivotYNum = correctNumber(pivotY.value, pivotYNum);
+            const pivotYCSSValue = pivotY.type === 'pivot-fixed' ? pxToEm(pivotYNum) : `${pivotYNum}%`;
+            transformOrigin = `${pivotXCSSValue} ${pivotYCSSValue}`;
+            transform = `rotate(${$jsonTransform.rotation}deg)`;
+        }
+    }
+
     $: stl = {
         ...style,
         ...backgroundStyle,
@@ -432,6 +457,8 @@
         margin,
         opacity,
         transition: actionAnimationTransition,
+        'transform-origin': transformOrigin,
+        transform,
         '--divkit-animation-opacity-start': animationOpacityStart,
         '--divkit-animation-opacity-end': animationOpacityEnd,
         '--divkit-animation-scale-start': animationScaleStart,

client/web/divkit/src/types/base.d.ts

@@ -63,6 +63,24 @@ export type TransitionChange = ChangeBoundsTransition | {
     items: TransitionChange[];
 }
 
+export interface PivotFixedValue {
+    type: 'pivot-fixed';
+    value: number;
+}
+
+export interface PivotPercentageValue {
+    type: 'pivot-percentage';
+    value: number;
+}
+
+export type PivotValue = PivotFixedValue | PivotPercentageValue;
+
+export interface Transform {
+    pivot_x?: PivotValue;
+    pivot_y?: PivotValue;
+    rotation?: number;
+}
+
 export interface DivBaseData {
     type: string;
     id?: string;
@@ -89,4 +107,5 @@ export interface DivBaseData {
     transition_triggers?: TransitionTrigger[];
     // selected_actions;
     // focus;
+    transform?: Transform;
 }

schema/div-base.json

@@ -156,7 +156,8 @@
       "$ref": "div-transform.json",
       "$description": "translations.json#/div_base_transform",
       "platforms": [
-        "android"
+        "android",
+        "web"
       ]
     }
   }