In order to use -webkit and/or -moz style CSS3 attributes such as ‘-webkit-transform’ or ‘-moz-rounded-border’ to generate rounded borders, transformations etc. you have to extend the mootools Element.Styles hash. Doing this enables you to use the Element.setStyle() method. You can even use the whole mootools effects library and tween -webkit and/or -moz styles.
Element.Styles.extend({
WebkitTransform: 'rotateX(@deg)'
});
The styles property-name has to be given camelCases. Thus ‘-webkit-transform’ has to be given as ‘WebkitTransform’. Specify how the property has to be set by defining a string like ‘rotateX(@deg)’ and leaving the @ to be replaced by the value you set the css property to.
Read on for an example. Read more »