----- TRANSFORM -----

オリジナル

変形　transform: scale(2.5 , 0.5);

回転　transform:rotate(15deg);

傾ける　transform: skew(15deg , 15deg);

CSS で使用できる角度の単位
  transform の関数などで使われる CSS で使用できる角度の単位

単位

deg
  degree, 度数法。
  360 で円を一周するお馴染みの表し方。

grad
  グラード。ゴン(gon)、グレード(grade)、グラディアン(gradian) とも。
  1直角を 100 とする単位。
  つまり 90deg の 1/100 が 1grad になる。360deg は 400grad で表すことができる。

rad
  ラジアン(radian)。弧度法。
  円周上でその円の半径と同じ長さの弧を切り取る2本の半径が成す角の値 だそうです。
  360deg は 2πrad で表すことができる。
  degree からの変換は degree * π / 180 で行う。

turn
  1回転を1つの単位として扱う。
  1turn は 360deg と等しい。
 

----- TRANSITION -----

プロパティの値を変化させる
　　例　文字の色と背景色を変化させてみる

    div {
      transition-property:background-color color;
      transition-duration:3s;  
    }
    div:hover {
      background-color: #FFCC33;
      color: #FF0000;
    }

　　例　変形　transform: scale(x,y);を変化させてみる

    div {
      transition-property:transform;
      transition-duration:4s;  
    }
    div:hover {
      transform: scale(2.5,0.5);
     }

----- ANIMATION -----

CSS
   .textbound {
    background-color: #3300FF;
    width: 400px;
    height: 80px;
  }
  .textbound span {display: inline-block;}
   
  .textbound-1 {animation: bound 7s ease-in-out 3s infinite; color: #FF0000;}
  .textbound-2 {animation: bound 8s ease-in-out 4s infinite; color: #33FFFF;}
  .textbound-3 {animation: bound 4s ease-in-out 5s infinite; color: #FF9900;}
  .textbound-4 {animation: bound 5s ease-in-out 6s infinite; color: #00CC00;}
 
  @keyframes bound {
    0% {transform: scale(1) translate(0,0);}
    30% {transform: scale(.2) translate(0,-80px);}
    50% {transform: scale(2,.8) translate(0,80px);}
    70% {transform: scaleY(.5) translate(180px,-130px);}
    90% {transform: scale(1.5, 1.5) translate(-130px,20px);}
    100% {transform: scale(1) translate(0,0);}
  }
  
HTML
  <div class="textbound">
    <span class="textbound-1">L</span>
    <span class="textbound-2">O</span>
    <span class="textbound-3">G</span>
    <span class="textbound-4">O</span>
  </div>