实用指南：【前端基础】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

在这里插入图片描述
在这里插入图片描述

posted @ 2025-11-09 21:57  yangykaifa  阅读(2)  评论(0)    收藏  举报