Browse Source

Introduce CSS transformation function rotate3d

CSS_TRANSFORMATION
Shagen Ogandzhanian 3 years ago
parent
commit
7c1a9f2bf5
  1. 2
      web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/transform.kt
  2. 8
      web/core/src/jsTest/kotlin/css/TransformTests.kt

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

@ -21,7 +21,9 @@ fun matrix3dTransform(
) = TransformFunction { "matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4)" } ) = TransformFunction { "matrix3d($a1, $b1, $c1, $d1, $a2, $b2, $c2, $d2, $a3, $b3, $c3, $d3, $a4, $b4, $c4, $d4)" }
fun perspectiveTransform(d: CSSLengthValue) = TransformFunction { "perspective($d)" } fun perspectiveTransform(d: CSSLengthValue) = TransformFunction { "perspective($d)" }
fun rotateTransform(a: CSSAngleValue) = TransformFunction { "rotate($a)" } fun rotateTransform(a: CSSAngleValue) = TransformFunction { "rotate($a)" }
fun rotate3dTransform(x: Number, y: Number, z: Number, a: CSSAngleValue) = TransformFunction { "rotate3d($x, $y, $z, $a)" }
fun StyleBuilder.transform(transformFunction: TransformFunction) { fun StyleBuilder.transform(transformFunction: TransformFunction) {
property("transform", transformFunction.apply()) property("transform", transformFunction.apply())

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

@ -48,4 +48,12 @@ class TransformTests {
assertEquals("rotate(3deg)", nextChild().style.transform) assertEquals("rotate(3deg)", nextChild().style.transform)
} }
@Test
fun rotate3d() = runTest {
composition {
Div({ style { transform(rotate3dTransform(1, 1, 0, 2.deg)) } })
}
assertEquals("rotate3d(1, 1, 0, 2deg)", nextChild().style.transform)
}
} }
Loading…
Cancel
Save