Forked from: tarotarorg's CSS3 animation test diff(22) CSS3 animation test(iPhone用) tarotarorg Follow 2010-08-12 18:55:36 License: GPLv3 License Fork1 Fav0 View2382 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 13 lines HTML 21 lines CSS 27 lines CSS3 animation test(iPhone用) jQuery v1.4.2 // forked from tarotarorg's "CSS3 animation test" http://jsdo.it/tarotarorg/6QK8 $(function() { $("#css3d-anim li div").mouseover(function(){ this.className = 'poster hoverPoster'; }); $("#css3d-anim li div").mouseout(function(){ this.className = 'poster'; }); }); <h3>iPhone用</h3> <ul id='css3d-anim'> <li> <div class='poster' id='poster1'> <h3>あいうえお</h3> </div> </li> <li> <div class='poster' id='poster2'> <h3>かきくけこ</h3> </div> </li> </ul> <div> <h3>参考サイト</h3> <a href="http://www.quirksmode.org/dom/events/tests/iphone2.html">Events - iPhone</a> </div> CSS3 animation test(iPhone用) body { background-color: #DDDDDD; font: 30px sans-serif; } #css3d-anim { height:500px; } #css3d-anim li{ display:inline; float:left; -webkit-transform-style: preserve-3d; -webkit-perspective: 500; -webkit-transition-property: perspective; } .poster { background-color:#ff9933; border:solid black 1px; -webkit-transform: rotateY(30deg); -webkit-transition-duration: 0.5s; } .hoverPoster { background-color:#99ff33; -webkit-transform: rotateY(0deg); -webkit-transition-duration: 0.5s; } // forked from tarotarorg's "CSS3 animation test" http://jsdo.it/tarotarorg/6QK8 $(function() { $("#css3d-anim li div").mouseover(function(){ this.className = 'poster hoverPoster'; }); $("#css3d-anim li div").mouseout(function(){ this.className = 'poster'; }); }); <h3>iPhone用</h3> <ul id='css3d-anim'> <li> <div class='poster' id='poster1'> <h3>あいうえお</h3> </div> </li> <li> <div class='poster' id='poster2'> <h3>かきくけこ</h3> </div> </li> </ul> <div> <h3>参考サイト</h3> <a href="http://www.quirksmode.org/dom/events/tests/iphone2.html">Events - iPhone</a> </div> body { background-color: #DDDDDD; font: 30px sans-serif; } #css3d-anim { height:500px; } #css3d-anim li{ display:inline; float:left; -webkit-transform-style: preserve-3d; -webkit-perspective: 500; -webkit-transition-property: perspective; } .poster { background-color:#ff9933; border:solid black 1px; -webkit-transform: rotateY(30deg); -webkit-transition-duration: 0.5s; } .hoverPoster { background-color:#99ff33; -webkit-transform: rotateY(0deg); -webkit-transition-duration: 0.5s; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/ds3g/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/tarotarorg/ds3g" title="CSS3 animation test(iPhone用)">CSS3 animation test(iPhone用) - jsdo.it - share JavaScript, HTML5 and CSS</a></p> Tweet twitter Forked sort new page view favorite forked forked: CSS3 animation test(iP.. ordbtk 00 45views 14/21/27 forked from: CSS3 animation te.. yuriponx 00 111views 14/21/27