Chelsea_vbulletin3_import31917
New Member
Given the following HTML elements and their styles, the bottom left corner of the reflection is trimmed, which is undesirable. I have tried adjusting the height, overflow, margin, padding, etc. and nothing has made the entire image show. Whats the problem here in the first place? Is there anything I can do without changing the structure of the HTML?\[code\]//Elements<div> <img id="someImage" src="http://stackoverflow.com/questions/14423105/some-img.png"/> <section class="reflection"></section><div>//Stylesdiv { perspecive:600px; transform-style
erserve-3d;}div > img { transform:rotateY(-60deg);}div > .reflection{ background:-moz-element(#someImage) no-repeat; transform:scaleY(-1); }\[/code\]Only works in Mozilla:http://jsfiddle.net/zorikii/RWfhc/
erserve-3d;}div > img { transform:rotateY(-60deg);}div > .reflection{ background:-moz-element(#someImage) no-repeat; transform:scaleY(-1); }\[/code\]Only works in Mozilla:http://jsfiddle.net/zorikii/RWfhc/