[css-round-display] Using CSS polar properties as CSS transforms function

• From: Hur, Joone <joone.hur@intel.com>
• Date: Mon, 25 Jan 2016 22:40:26 +0000
• To: "www-style@w3.org" <www-style@w3.org>
• Message-ID: <149D099AFEE38148893131F8922A7F4D02420DFF@PGSMSX103.gar.corp.intel.com>

Hi,

Brad already mentioned this idea at https://lists.w3.org/Archives/Public/www-style/2015Dec/0263.html.
I also have a similar idea to use CSS polar properties as CSS transform function:

Here is the Brad's idea:
transform: polar(angle, distance);

In addition, we could use polar-origin and polar-anchor as CSS transform function:
transform: polar-origin (100%, 50%);  /* moves the point of origin to the lower center side of the element.*/
transform: polar-anchor (100%, 0%);  /* moves the anchor point of the element to the upper right corner of the element.*/

Using CSS polar properties as  CSS 3D transform function:
We could apply the polar properties to CSS 3D transforms. In this case, the polar property should have (r, θ, φ) value as follows:
transform: polar3d (r, θ, φ);  /*r: radial distance, θ: polar angle, φ: azimuthal angle*/

We could transform the element using polar3d(r, θ, φ) function like the above in a spherical coordinate system.
https://en.wikipedia.org/wiki/Spherical_coordinate_system#/media/File:3D_Spherical.svg

The polar-origin() function could have z-value to set a point of origin in 3D space:
transform: polar-origin3d(x, y, z);

We could also add θ and φ to polar-anchor in order to make it work in 3d space:
transform: polar-anchor3d(percentage|length, percentage|length, θ, φ);

It would be good to talk about this idea in this CSS WG meeting.

Thanks,
Joone

Received on Monday, 25 January 2016 22:41:01 UTC