Languages

Menu
Sites
Language
[Gear S3] Rotation of element causes scaling of entire screen

Hello,

I am working on a watch face. I have a problem with rotation of hour hands. When I rotate some element, it causes entire screen to scale down.

Watch face should look like this image

correct view

 

But when I apply rotation to ANY element (i.e. second hand), it causes this

 

This is my code for rotating specified element.

function rotateElement(element, rotateAngle)
{
    element.style.transform = "rotate(" + rotateAngle + "deg)";
}

 

EDIT: it is not just problem of the emulator, it happens also on physical device (I am developing on Gear S3)

Edited by: John Ixion on 23 Jul, 2017
List

Responses

1 Replies
Armaan-Ul- Islam

I would consider this guide helpful for you:

CSS Transforms

https://developer.tizen.org/development/guides/web-application/w3chtml5supplementary-features/user-interface/css-transforms

 

Now, There's a Note on the Guide that says:

"For a rotation, the image has to be carefully created to ensure the correct end result. The rotation occurs with the center of the element as the center. If the rotation center must be moved because the image center is not aligned, use the transform-origin property to adjust the rotation location."

So I would suggest you check out the origin property.

 

Related Links:

https://css-tricks.com/almanac/properties/t/transform-origin/

https://developer.tizen.org/development/guides/web-application/application-management/applications/watch-application