Html CSS变换剪裁翻转图像

给定以下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);    
}

//元素
//风格
div{
个人：600px；
变换样式：perserve-3d；
}
div>img{
变换：旋转（-60度）；
}
div>.reflection{
背景：-moz元素（#someImage）无重复；
变换：scaleY（-1）；
}

仅适用于Mozilla：

---

您需要设置变换“原点”，如下所示：

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

---

如果有人感兴趣，这是一个非常简单的解决方案。函数的-moz-element（）接受屏幕上显示的元素

CSS函数的作用是：定义从任意HTML元素生成的值。此图像是活动的，这意味着如果HTML元素发生更改，使用结果值的CSS属性将自动更新。-

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

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

---

浏览器支持：你是说“右下角”吗？我看左下角没什么问题。遗憾的是，这没什么用。我可以通过将变换原点添加到reflection类来移动反射，但这不是我想要的结果。