1

これは私がいくつかのウェブ技術で達成したいことです：

例http://img171.imageshack.us/img171/2585/decacb00845442de800a5c5.png

実際の3Dオブジェクトのように、画像の「奥行き」を表示するために、2D画像に3D効果を追加する必要があります。しかし、私はこのようなものを作るために何を使うべきかわかりません（jqueryプラグイン、他のいくつかのjsライブラリ...）？誰かが私にいくつかの基本的な指示を与えることができますか？私はこれがposter.comとsimialrサイトで可能であるのを見ましたが、何をすべきか理解できません。

多くの場合、私はそのサイトからスクリプトを盗みたいとは思わない:)

4

1 に答える 1

1

HTML:

<img src="http://lorempixel.com/400/200" alt /><div class="cubus"></div>​

CSS:

div.cubus
{
    height:200px;
    width: 17px;
    margin-top:-5px;
    box-shadow: inset -10px -8px 16px -9px #CCC;
transform:skew(0, -30deg);
-ms-transform:skew(0, -30deg); /* IE 9 */
-moz-transform:skew(0, -30deg); /* Firefox */
-webkit-transform:skew(0, -30deg); /* Safari and Chrome */
-o-transform:skew(0, -30deg); /* Opera */
    float:left;
}

img{float:left;}

デモ:
http://jsfiddle.net/ewz3E/

于 2012-06-19T17:36:37.267 に答える