前端小林

平移

CSS語法

• transform:translate(X軸偏移量，Y軸偏移量)
• 取值：可以正負
  1.具體的像素單位；
  2.百分比(參照盒子自身尺寸)
• transform:translateX();
  transform:translateY();
  如果translate(只有一個值) === translateX()

<style>
      .box {
        width: 500px;
        height: 300px;
        border: 4px solid #000;
        transform:translate(100px,50px);
        /* X軸向右平移100px，Y軸向下平移50px */
      }

</style>

旋轉

CSS語法

• transform:rotate(角度deg)

一定要添加deg,否則沒有效果

• 取值：
  1. 正值：順時針旋轉；
  2. 負值：逆時針旋轉；
• 細節：先做其它的變換再進行旋轉

旋轉會改變當前元素的坐標軸的方向

<style>
      .box {
        width: 500px;
        height: 300px;
        border: 4px solid #000;
        transform:rotate(45deg);
        /* 順時針旋轉45度 */
      }

</style>

縮放

CSS語法

• transform:scale(倍數)
• transform:scale(X倍數，Y倍數)
• 取值：
  1.大于1放大；
  2.小于1縮小

<style>
      .box {
        width: 500px;
        height: 300px;
        border: 4px solid #000;
        transform:scale(1.5);
        /* 放大1.5倍 */
      }

</style>

注意點：行內元素所有的平面轉換是沒有效果的