Some nice stuff can be acomplished with that... quick and dirty demo (webkit
only for now): http://sandbox.vault7.com/playground/clock/
The relevant code:
var newStyles = new Hash({
'webkitTransform': 'rotateX(@deg) skew(@deg)',
'mozTransform': 'rotate(@deg) skew(@deg)'
});
$extend(Element.Styles, newStyles);
2010/3/27 Oskar Krawczyk <[email protected]>
> Be sure to push it to GIT. I'd really like to see what you'll come up with.
>
> On 27 Mar 2010, at 20:56, patcullen wrote:
>
> > Brilliant!! Makes a lot of sense now when I read Element.setStyle as
> > well. Thanks for your help Fabio and Valerio. Now I can get working on
> > improving this thing. Much appreciated.
> >
> > // Pat Cullen
> >
> >
> > On Mar 27, 6:17 pm, fabiomcosta <[email protected]> wrote:
> >> Got it.
> >> I was talking to Valerio and he said its possible, and its easy
> >> enough.
> >> Just add this line of code:
> >>
> >> Element.Styles.MozTransform = "rotate(@deg) scale(@)";
> >>
> >> before you call your effects.
> >> The working demo:
> >>
> >> http://mootools.net/shell/HtauU/4/
> >>
> >> Adding this property you can pass an array with 2 elements and it will
> >> be applied correctly to your transform style, like this:
> >>
> >> el.setStyle('MozTransform', [50, 2]);
> >>
> >> Thats why the effect works.
> >>
> >> On Mar 27, 9:12 am, patcullen <[email protected]> wrote:
> >>
> >>
> >>
> >>> I tried some of the ideas presented in the replies, but didnt find
> >>> resolve. To try explain the problem a little clearer i created a new
> >>> shell example..http://mootools.net/shell/HtauU/3/
> >>
> >>> The first two buttons illustrate tweening the css3 transform property,
> >>> but on only one 'dimension'. First button only tweens rotation, second
> >>> only does scaling.
> >>> Third button illustrates how Mootools conveniently allows me to:
> >>> setStyle('-moz-transform', 'rotate(50deg) scale(2)') which applies
> >>> both the rotation and the scaling to the element.
> >>> Fourth button illustrates how I cannot get this to work with tweening.
> >>> *** This is what Im trying to figure out.
> >>
> >>> The Element.setStyle in the shell example is copied from core to try
> >>> work some arounds, but it has not helped, infact when enabled, my
> >>> additions dont effect the element at all which confuses me even more.
> >>
> >>> Thanks for the help thus far.
> >>> // pat cullen
> >>
> >>> On Mar 26, 2:10 pm, patcullen <[email protected]> wrote:
> >>
> >>>> Hi, I'm busy putting together some ideas for a webtop, one of the
> >>>> peripheral features (one of the fun ones to code) is the ability to
> >>>> alt-tab between windows/forms.
> >>
> >>>> So far this idea largely rests on the ability for a browser to
> >>>> implement the CSS3 transform rule. Here's my mooshell example:
> http://mootools.net/shell/S53HG/
> >>
> >>>> I've only just started and have had many ideas for this plugin; but
> >>>> don't want to continue if, or until I can figure out this problem... I
> >>>> cant (even after abusing the core library a bit) get the css3
> >>>> transform effect to work while being morphed by mootools. The wierd
> >>>> thing is that using setStyles directly does apply these CSS3 rules.
> >>
> >>>> Hopefully if you have a look at the mooshell it will make more sense.
> >>>> If I can get this working, I hope to buff it up with events, plenty of
> >>>> options, then stick it on forge. The only other idea I can apply it to
> >>>> so far is for looking at photos in a gallery.
> >>
> >>>> // pat
> >
> > To unsubscribe from this group, send email to mootools-users+
> unsubscribegooglegroups.com or reply to this email with the words "REMOVE
> ME" as the subject.
>
> To unsubscribe from this group, send email to mootools-users+
> unsubscribegooglegroups.com or reply to this email with the words "REMOVE
> ME" as the subject.
>
To unsubscribe from this group, send email to
mootools-users+unsubscribegooglegroups.com or reply to this email with the
words "REMOVE ME" as the subject.
