CSS3 animation test

tarotarorg

2010-08-12 20:54:01

License: MIT License

Fork: 6

Fav: 0

View: 3213

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 0 lines
HTML 21 lines
CSS 30 lines

CSS3 animation test

CSS3 animation test

<h3>WebKit用</h3> <ul id='css3d-anim'> <li> <div class='poster'> <h3>あいうえお</h3> </div> </li> <li> <div class='poster'> <h3>かきくけこ</h3> </div> </li> </ul> <div> <h3>参考サイト</h3> <a href="http://www.marcofolio.net/css/3d_animation_using_pure_css3.html">3d animation using pure CSS3</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; -webkit-transition-duration: 0.5s; } #css3d-anim li .poster { background-color:#ff9933; border:solid black 1px; -webkit-transform: rotateY(30deg); -webkit-transition-duration: 0.5s; } #css3d-anim li .poster:hover { 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/6QK8/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/tarotarorg/6QK8" title="CSS3 animation test">CSS3 animation test - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code