diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt index c67afec899..b7ff59f75b 100644 --- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt +++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt @@ -24,6 +24,9 @@ fun perspectiveTransform(d: CSSLengthValue) = TransformFunction { "perspective($ fun rotateTransform(a: CSSAngleValue) = TransformFunction { "rotate($a)" } fun rotate3dTransform(x: Number, y: Number, z: Number, a: CSSAngleValue) = TransformFunction { "rotate3d($x, $y, $z, $a)" } +fun rotateX(a: CSSAngleValue) = TransformFunction { "rotateX($a)" } +fun rotateY(a: CSSAngleValue) = TransformFunction { "rotateY($a)" } +fun rotateZ(a: CSSAngleValue) = TransformFunction { "rotateZ($a)" } fun StyleBuilder.transform(transformFunction: TransformFunction) { property("transform", transformFunction.apply()) diff --git a/web/core/src/jsTest/kotlin/css/TransformTests.kt b/web/core/src/jsTest/kotlin/css/TransformTests.kt index 56338fa6a1..15d4eae5b1 100644 --- a/web/core/src/jsTest/kotlin/css/TransformTests.kt +++ b/web/core/src/jsTest/kotlin/css/TransformTests.kt @@ -56,4 +56,44 @@ class TransformTests { assertEquals("rotate3d(1, 1, 0, 2deg)", nextChild().style.transform) } + + @Test + fun rotateX() = runTest { + composition { + Div({ style { transform(rotateX(60.deg)) } }) + Div({ style { transform(rotateX(-0.25.turn)) } }) + Div({ style { transform(rotateX(3.14.rad)) } }) + } + + assertEquals("rotateX(60deg)", nextChild().style.transform) + assertEquals("rotateX(-0.25turn)", nextChild().style.transform) + assertEquals("rotateX(3.14rad)", nextChild().style.transform) + } + + @Test + fun rotateY() = runTest { + composition { + Div({ style { transform(rotateY(60.deg)) } }) + Div({ style { transform(rotateY(-0.25.turn)) } }) + Div({ style { transform(rotateY(3.14.rad)) } }) + } + + assertEquals("rotateY(60deg)", nextChild().style.transform) + assertEquals("rotateY(-0.25turn)", nextChild().style.transform) + assertEquals("rotateY(3.14rad)", nextChild().style.transform) + } + + @Test + fun rotateZ() = runTest { + composition { + Div({ style { transform(rotateZ(60.deg)) } }) + Div({ style { transform(rotateZ(-0.25.turn)) } }) + Div({ style { transform(rotateZ(3.14.rad)) } }) + } + + assertEquals("rotateZ(60deg)", nextChild().style.transform) + assertEquals("rotateZ(-0.25turn)", nextChild().style.transform) + assertEquals("rotateZ(3.14rad)", nextChild().style.transform) + } + } \ No newline at end of file