Forked from: tarotarorg's CSS3 animation test diff(22)

CSS3 animation test(iPhone用)

tarotarorg

2010-08-12 18:55:36

License: GPLv3 License

Fork: 1

Fav: 0

View: 2382

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

CSS3 animation test(iPhone用)

// 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; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

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>

QR Code