1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると カラーホイールが 回転しながら斜めに傾いていきます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform プロパティで skew 関数を指定し ease-in-out で動かすことにより 最初はゆっくりと そして徐々に傾きの速度を増して動き また徐々に傾きの速度を落とし 最後はゆっくりと止まります 2 カラーホイールの回転 transform プロパティで rotatez 関数を指定し ease-in-out で動かすことにより 最初はゆっくりと そして徐々に回転速度を増して動き また徐々に回転速度を落とし 最後はゆっくりと止まります 3 カラーホイールのサイズ縮小 transform プロパティで scale 関数を指定し ease-in-out で動かすことにより 最初はゆっくりと そして徐々にサイズの縮小速度を増し また徐々にサイズの縮小速度を落とし 最後はゆっくりと止まります ( カラーホイールを傾けると斜めに長くなるので縮小しています ) プロパティ transform: skewx( ) skewy( ) skew( ) 要素を傾斜変形して表示するときに指定します 1
transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は X 軸と Y 軸に沿って傾斜します 傾斜角度は 角度 + deg で指定します 角度は正の角度 負の角度が指定できます 指定例 transform: skewx(20deg); transform: skew(-10deg, 30deg); ( 注 : サンプルの SkewTransformOrigin.html と SkewTransformOrigin.css を見てくださ い ) 重要 注意!: 本サンプルではカラーホイールの画像の傾きの動きに skew 関数を使用していますが IE(Internet Explorer) ブラウザは skew 関数に不具合があります (2015 年 10 月 3 日現在 IE11 で確認 ) 次のような現象が発生するので注意してください 1.skew (X 軸の傾斜角度, Y 方向の傾斜角度 ) の Y 方向の傾斜角度の後にスペース ( 半角スペース ) を入れると動作しません (scale 関数だけでなく transform プロパティに一緒に指定した他の関数も動作しなくなります ) 関数の括弧の中の前後にスペースを入れる書き方に慣れている方は注意してください 1 skew( -30deg, -30deg ) 動作しない 2 skew(-30deg, -30deg ) 動作しない 3 skew( -30deg, -30deg) 動作する 4 skew(-30deg, -30deg) 動作する Google Chrome Firefox Safari Microsoft Edge は どの記述方法でも正常に動作します しかし こんなことに頭を使うのは無駄なことなので skew 関数を指定する際には4のように括弧の中の前後にスペースを入れないで指定するようにしましょう 2.transform プロパティに複数の関数 ( 例えば skew translate rotatez scale) を 指定する場合 上記の 動作する 書き方をしても動作しない場合があります その ような場合には skewx(x 軸の傾斜角度 ) と skewy(y 軸の傾斜角度 ) に分けて指定すると 正常に動作するようですので IE 用にベンダープリフィックス -ms- を付加して次のよ うな指定を追加するのがよいと思われます transform: skew(-30deg, -30deg) rotatez(2160deg); -webkit-transform: skew(-30deg, -30deg) rotatez(2160deg); -ms-transform: skewx(-30deg) skewy(-30deg) rotatez(2160deg); 2
Microsoft Edge も上記 2 の現象が出ます IE から引き継いでしまったようです ま た Microsoft Edge は skewx と skewy に分けてベンダープリフィックス -ms- を付加 した指定をしても現象が改善されません (2016 年 4 月 24 日 ) サンプル CSS SkewWheel の説明 HTML の記述 (SkewWheel.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font1 クラスでフォントを指定し Hover を記述します id 属性 wheel の div 要素 ( 子ボックス ) の中に <img> タグで画像要素の記述をします 画像は "images/ ColorWheel.png" を指定します hover でトランジションが開始されるようにするので 各要素には onclick などの記述はしません <!DOCTYPE html> <html> <head> <title>skewwheel</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="skewwheel.css"> </head> <body> <p> ボタン ( 親ボックス ) を hover して カラーホイール ( 子ボックス ) を斜めに回転させる </p> <div id="stage"> <div id="button"><font class="font1">hover</font> <div id="wheel"><img src="images/colorwheel.png" alt="color Wheel"></div> </div> </div> </body> </html> CSS の記述 (SkewWheel.css) 先ず トランジションが動く #stage の記述をします 3
#stage { width: 400px; height: 400px; background-color: black; border: solid 1px black; position: relative; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にしま す 角丸矩形のボタンにしたいので border-radius プロパティでボックスの 4 隅の角丸の 半径を 10px で指定します #button { top: 20px; left: 250px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; 画像 (images/ ColorWheel.png) を入れる # wheel ボックス ( 子ボックス ) を記述します position は absolute にして 位置は top 90px と left 180px(#button ボックスの左上端を基準とした位置 ) で指定します transition の記述をします transform プロパティを 10 秒 ease-in-out でトランジションするように記述します #wheel { top: 90px; left: -180px; width: 250px; height: 250px; transition: transform 10s ease-in-out; -webkit-transition: -webkit-transform 10s ease-in-out; #wheel img { top: 0px; left: 0px; width: 100%; height: 100%; #button ボックス ( ボタン ) を hover したら #button ボックスの背景色を green に変化さ せます 4
#button ボックス ( ボタン ) を hover した時の変化として # wheel ボックスに transform プロパティで skew(-30deg, -30deg) rotatez(2160deg) scale(0.75, 0.75) を指定しておいて 時計回りで6 回転しながら X 軸方向へ30 度 Y 軸方向へ30 度傾いていくようにします この時 skew で傾けると ボックスの幅と高さが伸びるので scale で縮小 ( 今回の場合は 0.75 倍 ) すると自然な傾きに見えます transform プロパティに複数の関数 ( 例えば skew rotatez scale) を指定する場合には 各値の間にスペースを入れて記述しなければいけないので注意してください #button:hover { background-color: green; #button:hover div#wheel { transform: skew(-30deg, -30deg) rotatez(2160deg) scale(0.75, 0.75); -webkit-transform: skew(-30deg, -30deg) rotatez(2160deg) scale(0.75, 0.75); -ms-transform: skewx(-30deg) skewy(-30deg) rotatez(2160deg) scale(0.75, 0.75); /* IE 対応で必要 */ 最後にボタンに表示するテキストのフォントの指定をします.font1 { color: black; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 50px; 5