[webkit-dev] Applying transforms to box-reflect

Simon Fraser simon.fraser at apple.com
Wed Mar 4 10:11:36 PST 2009


On Mar 4, 2009, at 10:04 AM, Jonathan Smiley wrote:

> Is it possible to apply a transform (like skew) to the reflection  
> generated by -webkit-box-reflect?  My current style is:
> -webkit-box-reflect: below 4px
> 	-webkit-gradient(linear, left top, left bottom,
> 		from(transparent),
> 		color-stop(0.8, transparent),
> 		to(rgba(255, 255, 255, 0.25)));
>
> I'd like to skew the reflection only (not the reflected object) such  
> that the reflection's bottom edge is wider than the top.  I've  
> checked the relatively sparse documentation and can't seem to find a  
> definitive answer...if it's possible I imagine it's a syntactical  
> thing.  Thanks!
>

That's not possible. Reflections are simply a flip around one of the  
axes.

You'd have to generate the reflection yourself, with a combination of  
a transform and mask, to get this effect.

Simon



More information about the webkit-dev mailing list