In this blog I am trying to create a Water Shadow using CSS3 and HTML.
Below code will create a water shadow.
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:70px;
}
div#div2
{
transform:rotateX(120deg);
-ms-transform:translateZ(120px); /*IE*/
-o-transform:translateZ(210px);/* Opera */
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
-moz-transform:rotateX(120deg); /* Firefox */
}
</style>
</head>
<body>
<div><img src="images.jpg"/></div>
<div id="div2"><img src="images.jpg"/></div>
</body>
</html>
In this code I am create two div one for show image normally and second div for rotate the image in 120 degree on X axis.
And when show on the browser the result is below.
Leave a Comment