Introduce CSS transformations function translateX, translateY, translateZ

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt

@@ -48,6 +48,14 @@ fun translate(tx: CSSLengthValue, ty: CSSPercentageValue) = TransformFunction {
 fun translate(tx: CSSPercentageValue, ty: CSSLengthValue) = TransformFunction { "translate($tx, $ty)" }
 fun translate(tx: CSSPercentageValue, ty: CSSPercentageValue) = TransformFunction { "translate($tx, $ty)" }
 
+fun translateXTransform(tx: CSSLengthValue) = TransformFunction { "translateX($tx)" }
+fun translateXTransform(tx: CSSPercentageValue) = TransformFunction { "translateX($tx)" }
+
+fun translateYTransform(ty: CSSLengthValue) = TransformFunction { "translateY($ty)" }
+fun translateYTransform(ty: CSSPercentageValue) = TransformFunction { "translateY($ty)" }
+
+fun translateZTransform(tz: CSSLengthValue) = TransformFunction { "translateZ($tz)" }
+
 fun StyleBuilder.transform(transformFunction: TransformFunction) {
     property("transform", transformFunction.apply())
 }

web/core/src/jsTest/kotlin/css/TransformTests.kt

@@ -191,4 +191,34 @@ class TransformTests {
         assertEquals("translate(5%, 8%)", nextChild().style.transform)
     }
 
+    @Test
+    fun translateX() = runTest {
+        composition {
+            Div({ style { transform(translateXTransform(10.px)) } })
+            Div({ style { transform(translateXTransform(4.percent)) } })
+        }
+
+        assertEquals("translateX(10px)", nextChild().style.transform)
+        assertEquals("translateX(4%)", nextChild().style.transform)
+    }
+
+    @Test
+    fun translateY() = runTest {
+        composition {
+            Div({ style { transform(translateYTransform(12.px)) } })
+            Div({ style { transform(translateYTransform(3.percent)) } })
+        }
+
+        assertEquals("translateY(12px)", nextChild().style.transform)
+        assertEquals("translateY(3%)", nextChild().style.transform)
+    }
+
+    @Test
+    fun translateZ() = runTest {
+        composition {
+            Div({ style { transform(translateZTransform(7.px)) } })
+        }
+
+        assertEquals("translateZ(7px)", nextChild().style.transform)
+    }
 }