In my Rotating OpenLaszlo with Webkit post, i showed how it was possible to rotate OpenLaszlo elements using a recent build of Webkit, the HTML engine used in Safari.

Soon after i came across some very interesting documents on MSDN. It seems that Internet Explorer has support for visual filters and transitions.

These “visual filters and transitions” cover anything from simple Photoshop effects (including blur which i used in my Flash only Flex-style dialog blur in OpenLaszlo) to more complex transformations. More interestingly, like WebKit you can rotate elements!

An example which rotates by 270 degrees is as follows. Make sure you are viewing this page in Internet Explorer 5 or later, else this won’t work!

Unfortunately there are rather strange limitations with Internet Explorer’s rotation support.

You can only rotate in increments of 90 degrees, as opposed to Webkit which allows you to rotate by any angle. I guess they figured back in Web 1.0 that nobody wanted to rotate their elements using arbitrary angles.

Another thing is that elements you want to rotate need to have absolute positioning. Although this isn’t really a problem with OpenLaszlo as all the div’s it produces use absolute positioning.

Another perhaps more worrying problem is that with a 270 degree rotation one would expect an element to appear above the initial position. Although this could be worked around by altering the positioning in the CSS accordingly.

I guess that coupled with the apparent lack of support for changing the center of rotation and bugs with form controls limits the full effectiveness of this rotation support.

<canvas>
<class name="itrotatable" extends="view">
<attribute name="wrot" type="number" value="0"
setter="this.wrot = wrot; this.updateRot(wrot);"/>

<method name="updateRot" args="val">
var real_rot = Math.round(val / 90.0) % 4;
this.sprite.__LZdiv.style['filter'] = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + val + ')';
</method>
</class>

<itrotatable name="item" x="20" y="10" width="100" height="25" bgcolor="blue">
<text>Test</text>
<animatorgroup name="move" process="sequential"
duration="1000" start="true" repeat="Infinity">
<animator attribute="wrot" to="4" />
<animator attribute="wrot" to="2" />
<animator attribute="wrot" to="0" />
</animatorgroup>
</itrotatable >
</canvas>

Still, that’s one more Web Browser i can sort-of rotate OpenLaszlo elements in!