ご無沙汰しております。
お仕事にうつつを抜かしており、ひさびさの更新です。
以前に、
Reflector（鏡面効果）
Reflex.js（鏡面効果+立体効果）
という鏡面効果を出すスクリプトを使ってみましたが、
今回は鏡面効果＋鏡面箇所に奥行きを出すスクリプトを実装してみたいと思います。
Appleのサイトでよく目にするような鏡面効果です。
[ダウンロードとインストール]
3d image reflection with javascript
（http://ajaxorized.com/3d-image-reflection-with-javascript/）
下のほうにある[Download the full package here.]から必要なファイルをダウンロードできます。
prototype.jsとscriptaculous.js（builder.js）が必要ですが、
既にサイトに組み込んでいる場合は、reflection.jsだけを設定すればOKです。
prototype.js→scriptaculous.js→reflection.jsの順に読み込まれるようにしておきます。
<script type="text/javascript" src="xxxx/prototype.js"></script>
<script type="text/javascript" src="xxxx/scriptaculous.js?load=builder"></script>
<script type="text/javascript" src="xxxx/reflection.js"></script>
[使用方法]
非常に簡単です。
今回のサンプルにはこの画像を使用します。
花もみじ photo by xtc（この写真・・・・美しすぎます。）
鏡面効果を適用したい画像をdiv要素で囲み、divにidを指定しておきます。
<div id="terako_sample">
<img src="画像URL"/>
</div>
divに指定したidを引数として、Reflect3Dオブジェクトを作成すれば、
鏡面効果を得ることができます。
<script type="text/javascript">
new Reflect3D('terako_sample');
</script>
立体的な鏡面効果をつけるとこのようになります。
鏡面部分は背景色が透過されているようです。
（外側にもう一つブロック要素を作成し、背景色を変えてみました。）
[注意点]
div要素にtext-alignのスタイル指定をすると、
画像と鏡面部分がずれてしまうようです。
（text-align:center指定をしようとしましたが、うまくいきませんでした。）
padding、marginによる左右の位置調節は問題ありません。
※オプションの引数は特にないようでした。
☆不定期更新ですが、目指せ週末プログラミング！です。
（週末にプログラムしたものをまとめながら徐々に紹介していけたらと思っています。）