【前端基础】20、CSS属性——transform、translate、transition

一、transform概念

• transform 的作用：允许对某一个元素进行某些形变，包括旋转、缩放、倾斜、平移等
• 并非所有盒子都可以机进行transform 形变。通常行内级元素不能进行形变。
  • 例如：span 元素、a 元素

二、transform的用法

常见的函数 transform function：

• 平移：translate(x, y)
• 缩放：scale(x, y)
• 旋转：rotate(x, y)
• 倾斜：skew(deg, deg)

三、平移：translate(x, y)

• 平移：translate(x, y)
  • 这个函数用于移动元素在平面上的位置
• 值的个数：
  • 一个值：设置 x 轴上的位移
  • 两个值：设置 x 轴和 y 轴上的位移
• 值类型

  • 具体数值（100px）
    

  • 百分比（参照元素本身）

    • 如果设置 x 位移：参考的就是自身的宽度
    • 如果设置 y 位移：参考的就是自身的高度
      

四、translate 的补充

• translate 是 translateX 和 translateY 函数的缩写。

  • 设置 x 轴：translateX
    

  • 设置 y 轴：translateY
    

• translate 的百分比可以完成一个元素的水平和垂直居中
  

---

<!DOCTYPE html>
<html>

  <head>
    <title>Document</title>
      <style>

        .container {
          height: 500px;
          width: 500px;
          border: 5px solid red;
          display: inline-block;
          background-color: antiquewhite;
        }

        .box1 {
          height: 200px;
          width: 200px;
          background-color: aqua;

          /* transform: translate(100px); */

          /* transform: translate(50%, 50%); */

          /* transform: translateX(20%); */

          
          position: relative;
          top: 50%;
          transform: translateY(-50%); 

        }

      </style>
    </head>

    <body>
      <div class="container">
          <div class="box1">box1</div>
      </div>
    </body>
</html>

五、缩放：scale(x, y)

• 缩放：scale(x, y)

  • 改变元素的大小

• 值个数

  • 一个值：设置 x 轴上的缩放。（y 轴默认也是一样的值）
    

  • 两个值：设置 x 轴和 y 轴上的缩放
    

• 值类型

  • 数字
    • 1：保持不变
    • 2：放大一倍
    • 0.5：缩小一半
  • 百分比：不常用

• scale 是 scaleX 和 scaleY 函数的缩写。

  • 设置 x 轴：scaleX
  • 设置 y 轴：scaleY

---

<!DOCTYPE html>
<html>

  <head>
    <title>Document</title>
      <style>

        .container {
          height: 200px;
          width: 200px;
          border: 5px solid red;
          display: inline-block;
          background-color: antiquewhite;
        }

        .box1 {
          height: 200px;
          width: 200px;
          background-color: aqua;

          /* transform: scale(0.5); */
          transform: scale(0.5, 0.3);
        }

      </style>
    </head>

    <body>
      <div class="container">
          <div class="box1">box1</div>
      </div>
    </body>
</html>

六、旋转：rotate(x, y)

• 值个数
  • 一个值：表示旋转角度
• 值类型
  • 常用单位 deg：表示旋转角度
  • 正数：顺时针旋转
  • 负数、逆时针旋转
    
    

---

• rotate 是 rotateZ 函数的缩写。
• rotate 有很多单位
  • 角度（deg）
  • 百分度（grad）
  • 弧度（rad）
  • 圈数（turn）
    
    

---

七、transform-origin

• 进行旋转或者说缩放的时候，都会有一个原点，所以 transform-origin 的作用就是：修改当前形变的原点位置
• 语法：transform-origin: x-axis y-axis z-axis;
  CSS3之transform-origin详解
  CSS3新属性篇(二)：transform-origin属性
• 值类型
  • 必须是长度<length>、百分比percentage、或者 left、center、right、top、bottom关键字中的一个
    • left、center、right、top、bottom关键字
    • 长度<length>：从左上角开始计算
    • 百分比percentage：参考元素本身的大小
      

---

<!DOCTYPE html>
<html>

  <head>
    <title>Document</title>
      <style>

        .container {
          height: 200px;
          width: 200px;
          border: 5px solid red;
          display: inline-block;
          background-color: antiquewhite;
          margin-left: 500px;
          margin-top: 300px;

        }

        .box1 {
          height: 200px;
          width: 200px;
          background-color: aqua;

          /* transform: rotate(25deg) */

          transform-origin: 100% 50%;
          transform: rotate(90deg)
        }

      </style>
    </head>

    <body>
      <div class="container">
          <div class="box1">box1</div>
      </div>
    </body>
</html>

---

八、倾斜：skew(deg, deg)

• 定义了一个元素在二维平面的倾斜转换
• 值个数
  • 一个值：表示 x 轴上的倾斜
  • 两个值：表示 x 轴和 y 轴的倾斜
• 值类型
  • deg：旋转角度
  • 正数：顺时针旋转
  • 负数：逆时针旋转
• 注意：倾斜原点受到 transform-origin 影响

九、transform 多个值

十、transition概念

• 什么是transition动画：
  • 提供一种更改css属性时控制动画速度的方法。
  • 让css的属性变化成为一种：有持续时间的过程，而不是立即生效
    • 例如：将一个元素的位置移动到另一个位置，默认是设置完立即生效
    • 使用 transition 后，可以看到有个动画效果，和PPT中显示内容一样，有缓慢变化的过程。
• CSS transition 可以决定：
  • 哪些属性发生动画效果
  • 何时开始（设置 delay）
  • 持续多久（设置 duration）
  • 如何动画（定义 timing function，比如匀速缓慢或者先快后慢）

十一、常用的transition