4

给定以下 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/

4

2 回答 2

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

更新小提琴

于 2013-01-24T06:23:39.197 回答
0

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

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);
}
于 2013-01-24T05:30:24.163 回答