3DトランスフォームのX軸回転
3DトランスフォームのX軸回転について
要素をX軸を基点に回転させるには、transformプロパティのrotateX
関数を使用します。
引数には回転させる角度を指定、単位はdegを使用します。
構文
transform:rotateX(角度);
サンプル1
sample
CSS
1 2 3 4 5 6 | .sample { -webkit- transform : rotateX ( 45deg ); -moz- transform : rotateX ( 45deg ); transform : rotateX ( 45deg ); } |
サンプル2
animationプロパティを付けた場合のサンプルです。
sample
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | @-webkit-keyframes rotateX { 0% { -webkit- transform : rotateX ( 0deg ); transform : rotateX ( 0deg ); } 25% { -webkit- transform : rotateX ( 90deg ); transform : rotateX ( 90deg ); } 50% { -webkit- transform : rotateX ( 180deg ); transform : rotateX ( 180deg ); } 75% { -webkit- transform : rotateX ( 270deg ); transform : rotateX ( 270deg ); } 100% { -webkit- transform : rotateX ( 360deg ); transform : rotateX ( 360deg ); } } @-moz-keyframes rotateX { 0% { -moz- transform : rotateX ( 0deg ); transform : rotateX ( 0deg ); } 25% { -moz- transform : rotateX ( 90deg ); transform : rotateX ( 90deg ); } 50% { -moz- transform : rotateX ( 180deg ); transform : rotateX ( 180deg ); } 75% { -moz- transform : rotateX ( 270deg ); transform : rotateX ( 270deg ); } 100% { -moz- transform : rotateX ( 360deg ); transform : rotateX ( 360deg ); } } @keyframes rotateX { 0% { -webkit- transform : rotateX ( 0deg ); -moz- transform : rotateX ( 0deg ); transform : rotateX ( 0deg ); } 25% { -webkit- transform : rotateX ( 90deg ); -moz- transform : rotateX ( 90deg ); transform : rotateX ( 90deg ); } 50% { -webkit- transform : rotateX ( 180deg ); -moz- transform : rotateX ( 180deg ); transform : rotateX ( 180deg ); } 75% { -webkit- transform : rotateX ( 270deg ); -moz- transform : rotateX ( 270deg ); transform : rotateX ( 270deg ); } 100% { -webkit- transform : rotateX ( 360deg ); -moz- transform : rotateX ( 360deg ); transform : rotateX ( 360deg ); } } .sample { -webkit- animation : rotateX 2s linear 0s infinite ; -moz- animation : rotateX 2s linear 0s infinite ; animation : rotateX 2s linear 0s infinite ; } |
シミュレーション
rotateX関数の値がどう反映されるかをシミュレートします。