HtmlCSS Reflect one image in two different directions trans
Html/CSS: Reflect one image in two different directions , transparent (to the right of it and below). Image for reference: http://www.gearhousebroadcast.com/i/layout/foobox/no-img.jpg.
Solution
<!DOCTYPE html>
<html>
<head>
<style>
#imgH {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
}
#imgV {
-moz-transform: scale(-1, -1);
-o-transform: scale(-1, -1);
-webkit-transform: scale(-1, -1);
transform: scale(-1, -1);
}
#imgT {
opacity : 0.5;
}
</style>
</head>
<body>
<img id=\"imgH\" src=\"http://www.gearhousebroadcast.com/i/layout/foobox/no-img.jpg\" style=\"width:104px;height:142px;\">
<img id=\"imgV\" src=\"http://www.gearhousebroadcast.com/i/layout/foobox/no-img.jpg\" style=\"width:104px;height:142px;\">
<img id=\"imgT\" src=\"http://www.gearhousebroadcast.com/i/layout/foobox/no-img.jpg\" style=\"width:104px;height:142px;\" style=\"linear-gradient(to right, blue, white);\">
</body>
</html>
