[css-round-display] Propose 'polar-orientation' property for aligning elements

I would like to suggest 'polar-orientation' property to decide an element's
orientation while positioning in the circular shape containing block.
Using 'polar-orientation', an element rotates in z-axis. And the rotation
degree is decided by value of the 'polar-orientation'.

Values for 'polar-orientation' would be:
	
	center | counter-center | <angle>

The 'center' keyword means that the element is rotated by the polar-angle
value.
Therefore, when the anchor point of an element is center point of the
element, a straight line passing through the anchor point meets the center
point of the containing block.

And for 'counter-center', the element is rotated by the angle of the
polar-angle plus 180 degrees.

<angle> value indicates that the element has a constant rotation
transformation by the specified angle. For example, the element would be
rotate 45 degree in z-axis if 'polar-orientation' property is specified
'45deg'.

Suggested property could be used like [1]. The property is implemented by
polyfill [2].

Do you think this property is useful?

- Jihye

[1] http://anawhj.github.io/jRound/demo/polar/rotate.html
[2] http://anawhj.github.io/jRound/src/css-polar-orientation.js

Received on Wednesday, 21 October 2015 02:16:14 UTC