HTMLで作成した200×200pxの枠をクリックされた時に回転させたい。


200×200のHTMLで作成した枠をクリックしたときに回転させたいと思っていますがまったく見当が付きません。  
イメージ的には、ある写真が並べられているとします。その写真が200×200pxの大きさです。  
ユーザはその写真をクリックすると、Z軸とX軸の方向に回転してその写真に関係するタグを入力できるフォームを作成したいと思っています。

Z軸とX軸というととてもわかりにくいですが、写真をクリックすると写真の裏側(反対側)が見れるようになります。その時のアニメーションが回転ドアのような回り方にしたいのですが可能なのでしょうか？？？




こういう動作でしょうか。クリックすると画像が回転します。  
FirefoxとChrome、IE、Operaで動いているのが確認できましたが、  
Chrome/Operaだと連続して回転させるとちょっと挙動が怪しいです。

[code]

    var pic = document.getElementById("pic");
    pic.addEventListener("click", function(){
     pic.classList.toggle("flipped");
    });
[/code]

[code]

    img {
        transition: 0.8s transform ease;
        width: 200px;
        height: 200px;
    }
    
    img.flipped {
        transform: perspective(120px) rotateY(180deg);
    }
[/code]

[code]

    <img id="pic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/df/Fox_study_6.jpg/399px-Fox_study_6.jpg" />
[/code]

