CODEWITHSUNDEEP
htmlcss
smulholland2
smulholland2

Reputation: 1163

CSS transform clipping flipped image

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?

//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/

Upvotes: 4

Views: 1102

Answers (2)

smulholland2
smulholland2

Reputation: 1163

If anyone is interested its a pretty simple solution. The -moz-element() function takes the element exactly as it is displayed on screen.

The element() CSS function defines an value generated from an arbitrary HTML element. This image is live, meaning that if the HTML element is changed, the CSS properties using the resulting value are automatically updated. - MDN

So all I had to do was add some padding 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

Upvotes: 1

Chad Adams
Chad Adams

Reputation: 1329

You need to set the transform "origin", like this:

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);
}

Upvotes: 0

Related Questions