クリックすると回転+縦のサイズを拡大
このサンプルの動作確認済み環境。
| マシン | 環境 |
|---|---|
| iPhone | iPhone OS 3.1.2に付属のSafari |
| Mac | Safari 4.0.4 |
サンプルの主な部分。
<style type="text/css"> .sample { background-color: #000000; top: 5px; left: 5px; width: 70px; height: 70px; -webkit-transform: rotate(0deg); -webkit-transition: -webkit-transform 1s linear, height 1s linear; } .sample2 { -webkit-transform: rotate(360deg); height: 140px; } </style> <script type="text/javascript"> <!-- function test(event) { var element = event.currentTarget; element.className = (element.className == 'sample') ? 'sample sample2' : 'sample'; } // --> </script> </head> <body> <div onclick="test(event);" class="sample"> <img src="image.png" alt="*" title="" /> </div> </body> </html>
動作説明
ほとんどの記述は前回のCSS3の記事「クリックすると回転」とほぼ同じです。
前回の記述に高さを 70px から 140px に変換する記述を追加しています。
このように同時に複数のプロパティの値を変化させた場合、複数の変化が同時に行われます。
.sample { (省略) height: 70px; -webkit-transform: rotate(0deg); -webkit-transition: -webkit-transform 1s linear, height 1s linear; }
.sample2 { -webkit-transform: rotate(360deg); height: 140px; }
サンプルはこちらで確認できます。
