网页变形-30天学会HTML＋CSS，制作精美网站

transform属性是变形的意思，可运用在2D及3D变形，可以对网页元素做旋转、缩放、平移、倾斜、矩阵变形的效果。但不适用於「行内元素」

transform: none|transform-function;

transform-function转换效果共有五种

• 平移 translate
• 缩放 scale
• 旋转 roate
• 倾斜 skew
• 矩阵变形 matrix

为了让浏览器有良好的支援，需使用浏览器前缀前缀

-moz-     /* firefox浏览器 */
-webkit-  /* Safari, google浏览器 */
-o-       /* Opera浏览器(早期) */
-ms-      /* Internet Explorer  */

以下来各别介绍每个使用方法

transform

translate 平移

将元素或物件设定水平或垂直方向移动

单位：px或百分比，可以是正数及负数

写法：

• 合并：translate(x,y)
• 单一方向：translateX(x)、translateY(y)
  范例：左边是预设位置，右边class="transform"设置了transform(50,100)，当前位置向右移动50px，向下移动100px

<div class="box">
  transform
  <div class="transform block">
  </div>
</div>

.transform{
  transform: translate(50px,100px); 
	background-color: #3f51b5;
  width: 100px;
  height: 100px;
}

单一边设置，transformX(50)，向右移动50px

.transform{
  transform: translateX(50px); 
}

scale 缩放

将元素放大或缩小。预设为1，大於1代表放大；小於1代表缩小

单位：纯数值倍率

写法：

• 单一方向：scaleX(x)、scaleY(y)
• 合并：scale(x，y)

范例：左边是预设宽度100px，高度100px，右边class="transform"设置了scale(1.5)，原本元素放大了1.5倍，宽度变150px

.transform{
  transform: scale(1.5);
	width: 100px;
  height: 100px;
}

右边class="transform"设置了scale(0.5)，原本元素缩小了0.5倍，宽度变50px

.transform{
  transform: scaleX(0.5);
}

单一边设置，scaleX(1.5)，X轴(水平轴)放大1.5倍，宽度150px，高度维持100px

.transform{
  transform: scaleX(1.5);
	width: 100px;
  height: 100px;
}

roate 旋转

将元素设定旋转

单位：deg(度数)。正值表示顺时针，负值表示逆时针。

范例：左边是预设，右边旋转20度

.transform{
  transform: rotate(20deg);
}

rotate为-20度，会逆时针旋转

.transform{
  transform: rotate(-20deg);
}

skew 倾斜

将元素倾斜

单位：deg。正数表示向左倾斜，负值表示向右倾斜

写法：

• 单一方向：skewX()、skewY()
• 合并：skew(x,y)
  范例：单一边倾斜

.transform{
  transform: skewX(60deg);
  
}

x,y轴一起设定倾斜

.transform{
 transform: skew(30deg, 30deg)
  
}

matrix 矩阵变形

把6种变形函式组合成一个矩阵进行的变形组合

transform:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

transform

使用transform可以一次套用多个变形函式(旋转、缩放...)

范例：一次设置角度、倾斜、平移

transform:rotate(20deg) skew(50deg) translateX(20px);

transform-origin 变形原点

变形时，预设的变形原点都是物件或DOM元素的中心点，使用transform-origin可以改变变型的基准点
范例：旋转角度设置transform-origin 位置

<div class="box">
    <div class="transform1 block">
      roate:60deg <br/>
      left top
    </div>
  </div>
  <div class="box">
    <div class="transform2 block">
      roate:60deg <br/>
      center center
    </div>
  </div>
  <div class="box">
    <div class="transform3 block">
      roate:60deg <br/>
      right bottom
    </div>
  </div>

.block{
  background-color: #3f51b5;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  padding: 10px;
  color: #fff;
}
.transform1{
  transform-origin: left top;
  transform: rotate(60deg);
}
.transform2{
  transform-origin: center center;
  transform: rotate(60deg);
}
.transform3{
  transform-origin: right bottom;
  transform: rotate(60deg);
}