W3C home > Mailing lists > Public > www-style@w3.org > January 2016

[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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:35 UTC