码海无涯系列，写给自己的注释
码海无涯-CSS实现鼠标悬停后卡片上升并出现亮光特效
网上看到一个HTML代码，是鼠标悬停后卡片上升并出现亮光
突发奇想改造了一下，左上角加了一个字，右下角也加了一个字
令其能在鼠标悬停时，出现一个字
看不懂的初学者，可以把
.box1:transform: skew(-30deg) 和 .box的overflow: hidden
注释掉，看看是怎么运作的
知识点归纳：
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())scaleX() (水平缩放)：控制元素水平方向的缩放。如果值为 1，则不进行水平缩放；如果大于 1，则放大；如果在 0 和 1 之间，则缩小。
skewY() (垂直倾斜)：控制元素在垂直方向上的倾斜。
skewX() (水平倾斜)：控制元素在水平方向上的倾斜。
scaleY() (垂直缩放)：控制元素垂直方向的缩放。如果值为 1，则不进行垂直缩放；如果大于 1，则放大；如果在 0 和 1 之间，则缩小。
translateX() (水平平移)：控制元素在水平方向上的平移量。
translateY() (垂直平移)：控制元素在垂直方向上的平移量。
即在不变换的情况下是matrix(1, 0, 0, 1, 0, 0)
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
overflow: hidden;
position: relative;
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: pink;
margin: 100px auto;
transition: all .1s;
}
.box1 {
position: relative;
position: absolute;
left: -110%;
top: 0;
width: 300px;
height: 300px;
background-color: pink;
background-image: linear-gradient(130deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
transform: skew(-30deg)
/* skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
transform的值有20多个，如：translate，scale，rotate，skew，perspective，matrix
*/
}
.box:hover .box1 {
left: 110%; /* 离父盒子左边，1.1倍box1的宽的距离 */
transition: all .1s;
}
.box:hover {
transform: translateY(-20px); /* Hover往上提升20px 坐标原点是左下角，Y轴与笛卡尔坐标正负相反 */
box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
}
.box3 {
float: right;
margin-right: 15px;
margin-top: 14px;
font-size: 23px;
transform: skew(30deg); /* 矫正文字因box1扭曲带来的变形*/
}
.box4 {
position: absolute; /* 绝对定位固定在底边 */
bottom: 0;
transform: skew(30deg); /* 矫正文字因box1扭曲带来的变形*/
margin-left: 10px;
margin-bottom: 5px;
font-size: 28px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">
<div class="box3">战</div>
<div class="box4">战</div>
</div>
</div>
</body>
</html>
