Recently i came across a post on the Webkit blog which demonstrates new support for transforms in the nightly builds of Apple’s Webkit (used in Safari and other browsers).
Quite simply it means that you can rotate, scale, and even skew any part of a web page. For example:
(Note that this currently only works in the nightly build of Webkit)
There is a slightly more impressive demonstration on the webkit blog. Which made me think… could i incorporate this neat functionality into OpenLaszlo’s DHTML runtime?
The answer is of course yes. OpenLaszlo already supports advanced transforms such as rotation, it’s just not implemented in the DHTML runtime as no web browser has supported it… until now that is. An extremely simple example of how to get it to work is as follows:
<class name="webkitrotatable" extends="view">
<attribute name="wrot" type="number" value="0"
setter="this.wrot = wrot; this.updateRot(wrot);"/>
<method name="updateRot" args="val">
this.sprite.__LZdiv.style['-webkit-transform'] = ‘rotate(’ + val + ‘rad)’;
</method>
</class>
This rather simple “webkitrotatable” class allows one to make a view which can be rotated by modifying the “wrot” parameter. So you can make a little rotating thing like so:
<webkitrotatable name="item" x="20" y="10" width="25" height="25" bgcolor="red">
<animatorgroup name="move" process="sequential"
duration="1000" start="true" repeat="Infinity">
<animator attribute="wrot" to="3.14159265" />
<animator attribute="wrot" to="6.2831853" />
<animator attribute="wrot" to="0" />
</animatorgroup>
</webkitrotatable>
Of course if i wanted a better solution, i’d just modify OpenLaszlo’s DHTML kernel and directly incorporate this functionality into the view class’ “rot” attribute. But for now, this is a pretty simple proof-of-concept.
