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 に答える