RE: background-transform (Was: Re: [css3-images] Repeating oblique gradients)

Correct.
The transform would be applied to the content after the other background properties. It is additive to the existing implementation.
In case of a repeating image scaled at 50% and rotated, the browser would scale the image, tile it and then apply the transform on the whole bitmap. (Internally the browser could optimize these steps)

I was thinking that background-origin would work to define the transformation point, but I'm not so sure..

Rik
-----Original Message-----
From: Simon Fraser [mailto:smfr@me.com] 
Sent: Thursday, December 02, 2010 8:53 AM
To: Rik Cabanier
Cc: Tab Atkins Jr.; Leif Arne Storset; Brad Kemper; www-style list
Subject: background-transform (Was: Re: [css3-images] Repeating oblique gradients)

On Dec 1, 2010, at 10:49 pm, Rik Cabanier wrote:

> So, if the browser vendors are OK with the background-transform, I think the spec could boil down to:
> axial-gradient(<color-stop>, ...)
> radial-gradient(<focal-position>, ...) focal point can be dropped if it's considered too advanced.
> 
> rotation and placement would be done through the background parameters.
> background-size 	defines the pre-transformed size of the gradient (default=bounding box)
> background-transform 	transforms the upper left corner of the gradient image
> background-origin 	defines the point where scaling/skewing/rotation happens
> background-repeat	signals how the gradient is tiled. Gradients would differentiate themselves from images in that they 'extend' themselves to fill the bounds if there is no repeat.

I'm not sure that I'm OK with background-transform yet, but I think we need to discuss it independently from gradients.

To clarify, I assume that background-transform accepts all the transform functions listed in the 2D transforms spec, but not those in 3D transforms. I further assume that the property is animatable, just like "transform:". This certainly opens up the possibility of lots of neat animation effects, which I like.

I also assume that background-transform applies to each background-image separately, if there are multiple, e.g.:

background-image: url(foo.png), url(bar.png);
background-transform: skewX(20deg), scale(0.5, 2);
background-repeat: repeat;

This seems reasonable.

Simon

Received on Thursday, 2 December 2010 17:54:18 UTC