Geek Answers Handbook

CSS cropping

Given the following HTML elements and their styles, the bottom left corner of the reflection is clipped, which is undesirable. I tried to adjust the height, overflow, margin, registration, etc., and nothing showed the whole image. What is the problem here in the first place? Can I do anything without changing the HTML structure?

//Elements <div> <img id="someImage" src="some-img.png"/> <section class="reflection"></section> <div> //Styles div { perspecive:600px; transform-style:perserve-3d; } div > img { transform:rotateY(-60deg); } div > .reflection{ background:-moz-element(#someImage) no-repeat; transform:scaleY(-1); }

Only works in Mozilla: http://jsfiddle.net/zorikii/RWfhc/

+4
source share
2 answers

If anyone is interested, this is a fairly simple solution. The -moz-element () function takes an element exactly as it appears on the screen.

The element () CSS function determines the value generated from an arbitrary HTML element. This image is live, which means that when you change the HTML element, CSS properties using the resulting value are automatically updated. - MDN

So, all I had to do was add a registration to the top of the original image element ...

 img{ transform:rotateY(60deg); -webkit-transform:rotateY(60deg); padding-top:100px; } .reflection{ background: -moz-element(#someImage) no-repeat; height:400px;width:200px; -moz-transform: scaleY(-1); transform: scaleY(-1); }

Updated Fiddle

+1
source

You need to set the value to "origin", for example:

 html{ background:black; } div{ perspective:600px; -webkit-perspective:600px; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; /* sets origin slightly higher so it just off center */ -webkit-transform-origin: 50% 40%; } img{ transform:rotateY(60deg); -webkit-transform:rotateY(60deg); } .reflection{ background: -moz-element(#someImage) bottom left no-repeat; height:300px;width:200px; -moz-transform: scaleY(-1); }
0
source

More articles:


All Articles