# tranform-origin + transform

自己可以先简单的实现 hover 默认的两种状态实现下滑线滑动

使用元素的 before 和 after , 定位到当前操作的为父级元素上, 效果前后利用 hover 和 transition 实现过度动画, 方便往下进阶。

### 达到的效果

采用 transition(过度效果)、transform: scaleX (缩放)、transform-origin(改变原点位置)，实现下滑线从左边近，右边出

#### 首先理解 hover 选择器的作用, 使用它时元素被分解成三个步骤

* hover 前(默认样式)
* hover 中(:hover 设置样式)
* hover 后(默认样式)

由此可以看出 hover 正常状态下只有两种状态

所以，必须要有一种方法，能够使得 hover 动画的进入与离开产生两种不一样的效果, 实现:

* hover 前设置原点位置 transform-orgin: right 0)、缩放大小 transform: scaleX(0), 隐藏 before 选择器
* hover 中(设置原点位置 transform-orgin: 0 0)、缩放大小 transform: scaleX(1), 显示 before 选择器
* hover 前(恢复 transform: scaleX(0)、transform-orgin: right 0), 向右隐藏 before 选择器

### 代码如下

```
<div class="box">Hover default</div>

.box {
  position: relative;
  left: 25%;
  width: 200px;
  height: 60px;
  line-height: 60px;
  color: #333;
  text-align: center;
  transition: color .5s;
  border-top: 2px solid #e2e2e2;
  border-bottom: 2px solid #e2e2e2;
}
.box::before {
  content: '';
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 200px;
  height: 2px;
  background-color: #000;
  transition: transform .5s;
  transform: scaleX(0);
  transform-origin: right 0;
}
.box::after {
  content: '';
  position: absolute;
  right: 0px;
  top: -2px;
  width: 200px;
  height: 2px;
  background-color: #000;
  transition: transform .5s;
  transform: scaleX(0);
  transform-origin: left 0;
}
.box:hover {
  color: red;
}
.box:hover::before {
  transform: scaleX(1);
  transform-origin: 0 0;
}
.box:hover::after {
 transform: scaleX(1);
 transform-origin: right 0;
}
```

### 参考文档

transform-origin 取值:

* x-axis 默认以元素框上边框为 x正半轴, 上边框与左边框的焦点为顶点; 水平偏移量有以下几种取值方式
  * left 等于 0 或 0%
  * center 等于 50%
  * right 等于 100%
* y-axis 以元素框左边框为 y正半轴, 左边框与上边框的焦点为顶点; 水平偏移量有以下几种取值方式
  * top 等于 0 或 0%
  * center 等于 50%
  * right 等于 100%
* z-axis 3D变形中会用到 详解见文档

transform-origin 实例解析:  <https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin>

transform-origin 坐标系图析:  <https://www.jianshu.com/p/fd44d21287ea>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.tanmer.cn/qian-duan/css3/tranform-origin-+-transform-+-transition.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.