

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

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


CC BY-SA 3.0
2015-08-16T12:11:41.917
14478
2015-09-15T15:54:43.497
10944
question
html css
HTMLで作成した200×200pxの枠をクリックされた時に回転させたい。


画像の回転の仕方は、以下ページの「SAMPLE 005: toggle」のようなイメージでしょうか。  
jQuery CSS3 transitionアニメーション デモ2 | POPS-BLOG-DEMO-020b  
<http://pops-web.com/main/html/demo-020b.html>

jquery.transitというプラグインを用いているようです。  
Transit - CSS transitions and transformations for jQuery  
<http://ricostacruz.com/jquery.transit/>


CC BY-SA 3.0
2015-08-16T12:59:08.743
14481
2015-08-16T12:59:08.743
2238
14478
answer


こういう動作でしょうか。クリックすると画像が回転します。  
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]


CC BY-SA 3.0
2015-08-16T13:00:30.370
14482
2015-08-16T14:23:13.003
2015-08-16T14:23:13.003
10330
10330
14478
answer