CSS变换剪裁翻转图像

Question

给定以下HTML元素及其样式，反射的左下角被裁剪掉了，这是不希望的。我已经尝试调整高度、溢出、边距、填充等，但仍然无法完整显示整个图像。首先，问题出在哪里？是否有任何办法可以在不改变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);    
}

仅适用于Mozilla浏览器： http://jsfiddle.net/zorikii/RWfhc/

- smulholland2

---

浏览器支持：https://developer.mozilla.org/zh-CN/docs/CSS/transform-style - Carol McKay

你是不是想说“右下角”？我觉得左下角也没什么问题。 - Pavlo

Answer 1

如果有人感兴趣，这是一个相当简单的解决方案。-moz-element()函数将元素正好显示在屏幕上。

element() CSS函数定义了从任意HTML元素生成的值。该图像是实时的，这意味着如果更改HTML元素，则使用生成值的CSS属性会自动更新。-MDN

所以我所要做的就是在原始图像元素的顶部添加一些填充...

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

更新的Fiddle

- smulholland2

Answer 2

你需要设置变换的“起点”，就像这样：

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

- Chad Adams

---

可惜，这没有起到任何作用。通过为反射类添加变换原点，我能够移动反射，但那不是我想要的结果。 - smulholland2