Image Reflection With -webkit-transform Property

In this example, I would like show you how it would be great and also simple if you use the CSS3’s -webkit-transform property in order to spice your logo or image with a pretty reflection.

View Demo (works only with Chrome and Safari)

Here is what the main CSS code looks like:

CSS

.reflected {
background: #fff url(mycar.jpg) no-repeat;
padding-top: 252px;
height: 150px;
overflow: hidden;
float: left;
position: relative;

}
.reflected img{
-webkit-transform: rotate(180deg);
opacity:0.5;
}

The -webkit-transform property is used to rotate mycar.jpg image by 180 degrees. Since this is done, we will set the opacity to 0.5 in order to give our reflection a very much alive aspect.

And our HTML code will be as follows:

HTML

<div class="reflected">
<img src="mycar.jpg" />
</div>

Final result:
Please be aware again that this example was tested in quite some browsers, and the only web browsers that support this CSS property until now are Chrome and Safari.

I have struck the CSS3 word as technically speaking, the -webkit-transform property is not at all a “CSS 3” property– sorry I was wrong. But it remains just a proprietary extension of the W3C spec.

How to encourage this blog if you like it:

• Promote our sponsors;
• Add any kind of comment or critic;
• Ask me directly by email if you prefer.

Just do something like that, and I will have the huge pleasure to continue posting the best of the creativity I have.

Share this post ?

---