Rotate a composable(jetpack compose) on Y axis without stretching it

Question

I have a composable named card with a bunch of identifiable information for employees/students, i want to add a capability to rotate the card so the backside is readable. i did that with the following

 var rotation by remember { mutableFloatStateOf(0f) }
    Box(
      modifier = Modifier
          .padding(paddingValues = padding)
          .pointerInput(key1 = null) {
              detectHorizontalDragGestures { change, dragAmount ->
                  rotation -= dragAmount
                  if (rotation >= 360) {
                      rotation = 0f
                  }
              }
          },
      contentAlignment = Alignment.Center,
    ) {
      Card(
        card = card,
        modifier = Modifier
          .graphicsLayer {
            rotationY = rotation
          },
      )
    }

thing is, even if this works, and the composable rotates, the rotation stretches it to the entire screen height, screenshot attached shows that. is there a way i can rotate the card on the Y axis without making it stretch?

Answer 1

Ok thanks to @Chirag Thummar, i've found out that i can use cameraDistance in the graphics layer to make the composable's viewport's distance so the card doesn't stretch as much. 18 was the sweetspot for me

    var rotation by remember { mutableFloatStateOf(0f) }
          Card(
            card = card,
            modifier = Modifier
              .graphicsLayer {
                rotationY = rotation
                cameraDistance = 18 * density
              },
          )