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/

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

Updated Fiddle

Answer 2

你需要设置变换“origin”，如下所示：

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

CSS变换剪辑翻转图像

2 个答案: