4

I have a div and I want to add a reflection effect to it.

I know there are lots of tutorials for adding reflection to an image (like this and this), but I didn't find anything about reflecting whole div.

Is it possible with CSS3? And what about jQuery? How?

EDIT
This is what I tried according to the first tutorial. Also, If I use this method, user will have to download the reflected content twice, which is not good...

Nope
  • 22,147
  • 7
  • 47
  • 72
Mahdi Ghiasi
  • 14,873
  • 19
  • 71
  • 119
  • Seeing the first link states creating reflection with css3 even with code shown how it is done, I'd say yes, it is possible in CSS3. Have you tried implementing that example? – Nope Aug 08 '12 at 21:43
  • I have tried it, but the text was not reflected. I'll try again in jsfiddle – Mahdi Ghiasi Aug 08 '12 at 21:44
  • 1
    Can you post the relevant html/css or even the fiddle? It would propably be easier then to get a handle on it. Also the sample as far as I could see was reflecting images, not sure it will work with plain text the same way. – Nope Aug 08 '12 at 21:45

1 Answers1

10

Try using CSS3's transform property with scaleY(-1):

CSS:

div.reflection
{
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}

HTML:

<div>
    blah
</div>
<div class="reflection">
    blah
</div>

http://jsfiddle.net/UMEdU/1/

Alex W
  • 37,233
  • 13
  • 109
  • 109
  • 3
    If you combine this with some jQuery and add some opacity this could really work – Jason Sperske Aug 08 '12 at 21:56
  • 1
    And how to add some gradient to that? (like this: http://designshack.net/wp-content/uploads/wkreflections-10.jpg ) – Mahdi Ghiasi Aug 08 '12 at 22:00
  • 1
    I have modified your code and it looks better now, also user will not have to download content twice: http://jsfiddle.net/UMEdU/2/ , but still I don't know how to add gradient to it... – Mahdi Ghiasi Aug 08 '12 at 22:02
  • @MahdiGhiasi Maybe [this](http://stackoverflow.com/questions/6424840/image-gradient-on-html5-canvas) will help. – John H Aug 08 '12 at 22:06