CSSでドアを開く3D効果

CSSで「ドアを開く」3D効果を作成しようとしていますが、できません。問題は、rotateY（）関数を使用すると要素が回転することです。ここで確認できますhttp://jsfiddle.net/uC4du/1/CSSでドアを開く3D効果

rotateY "基準軸"の変更方法は知っていますか？左隅を参考にして要素を回転させるにはどうすればよいですか？

2012-01-13 Eduardo Cobuci

1つのオプションは、親オブジェクトを2倍に広げ、半分は空白にすることです。次に、その中心軸上を反転すると、目に見える部分がドアのように動作しているように見えます。 –

@DAはい、私はしましたが、すべてをもっと難しくするでしょう:( –

これをチェックしてくださいhttp://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-トランジション/ tympanus.net/Development/ImageTransitions/index2.html –

'変換元'プロパティ（http://www.w3schools.com/cssref/css3_pr_transform-origin.asp）を使用できます。

「-webkit-transform-origin：0％50％;」のように設定します。ここで

は、そのプロパティを使用して、あなたの例である：http://jsfiddle.net/aV76H/

はそれが役に立てば幸い！

出典

2012-01-13 16:34:54

私が言ったことを正確に得るためのちょっとした更新：http://jsfiddle.net/aV76H/2054/ 元のバージョンは、 –

これは非常に有益な答えですが、Firefoxでこれを修正するには正しい方向で私を指摘できますか？ – Ryan

答えて

関連する問題