Converting CSS animations to Android Java gives different results on different device screens

Question

I'm trying to convert this CSS animation code to java:

@keyframes sideViewKF {
    to {
        transform: 
        perspective(58vw) 
        translate(-16vw, 8vw) 
        rotateX(-6deg) 
        rotateZ(-18deg) 
        rotateY(-36deg)
    }
}

Java version :

private void playAnimation() {
        long durationInMillis = (long) (0.5 * 1000);

        float translationX = -16f;
        float translationY = 8f;

        float rotationX = -6f;
        float rotationZ = -18f;
        float rotationY = -36f;

        PropertyValuesHolder translationXHolder = PropertyValuesHolder.ofFloat("translationX", translationX);
        PropertyValuesHolder translationYHolder = PropertyValuesHolder.ofFloat("translationY", translationY);
        PropertyValuesHolder rotationXHolder = PropertyValuesHolder.ofFloat("rotationX", rotationX);
        PropertyValuesHolder rotationZHolder = PropertyValuesHolder.ofFloat("rotation", rotationZ);
        PropertyValuesHolder rotationYHolder = PropertyValuesHolder.ofFloat("rotationY", rotationY);

        ObjectAnimator animator = ObjectAnimator.ofPropertyValuesHolder(currentTimeImage,
                translationXHolder, translationYHolder, rotationXHolder, rotationZHolder, rotationYHolder);
        animator.setDuration(durationInMillis);
        animator.start();
    }

The issue:

Note: the red layout is a fixed aspect ratio layout 16:9

In Nexus 4 (768 x 1280), the currentTimeImage is positioned in the right place

And in the POCO X3 NFC (1080 x 2400), it's showing in different position :