CSS 学习

Appearance

transform 形变属性 ​

CSS transform 属性允许对某个元素进行形变，包括旋转、缩放、平移、倾斜等。

注意

  1. 并非所有盒模型都支持 transform 的转换。
  2. 对于行内级非替换元素，比如 span、a 和 strong元素等不支持 transform 的转换。

transform 语法 ​

transform 属性可以指定为关键字值 none，或者是一个/多个 <transform-function> 值。

展开语法
css
 {
  /* 关键字值 */
  transform: none;

  /* 函数值 */
  transform: matrix(1, 2, 3, 4, 5, 6);
  transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  transform: perspective(17px);
  transform: rotate(0.5turn);
  transform: rotate3d(1, 2, 3, 10deg);
  transform: rotateX(10deg);
  transform: rotateY(10deg);
  transform: rotateZ(10deg);
  transform: translate(12px, 50%);
  transform: translate3d(12px, 50%, 3em);
  transform: translateX(2em);
  transform: translateY(3in);
  transform: translateZ(2px);
  transform: scale(2, 0.5);
  transform: scale3d(2.5, 1.2, 0.3);
  transform: scaleX(2);
  transform: scaleY(0.5);
  transform: scaleZ(0.3);
  transform: skew(30deg, 20deg);
  transform: skewX(30deg);
  transform: skewY(1.07rad);

  /* 多个函数值 */
  transform: translateX(10px) rotate(10deg) translateY(5px);
  transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

  /* 全局值 */
  transform: inherit;
  transform: initial;
  transform: revert;
  transform: revert-layer;
  transform: unset;
}

transform 属性函数很多，常用的函数包括：

  • translate(x, y) 位移
  • scale(x, y) 缩放
  • rotate(angle) 旋转
  • skew(x-angle, y-angle) 倾斜

位移 transalte() 函数 ​

translate() 函数用于移动元素在平面上的位置。

它是 translateX() 函数和 translateY() 函数的缩写。

css
.box {
  transform: translate(100px); /* 设置x轴平移100像素 */
  transform: translate(100px, 200px); /* 设置x轴平移100像素，y轴平移200像素 */
}

translate() 函数的值可以使用：

  1. 具体像素数值

  2. 百分比数值

    • 设置 X 轴平移，参照的是元素自身的宽度
    • 设置 Y 轴平移，参照的是元素自身的高度

在实际开发场景中，可以使用 translate() 函数实现元素的垂直居中。

缩放 scale() 函数 ​

scale() 函数可以改变元素的大小，包括宽度和高度。

它是 scaleX() 函数和 scaleY() 函数的缩写。

提供一个值时，设置 X 轴的缩放，提供两个值时，同时设置 X 和 Y 轴的缩放。

css
.box {
  transform: scale(1); /* 元素不缩放 */
  transform: scale(2); /* 元素宽度放大一倍 */
  transform: scale(2, 0.5); /* 元素宽度放大一倍，高度缩小一倍 */
}

鼠标悬浮时，元素会放大一倍，示例代码如下：

html
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
    &:hover {
      transform: scale(2);
    }
  }
</style>

<div class="container">
  <div class="box"></div>
</div>

旋转 rotate() 函数 ​

rotate() 函数可以改变元素的旋转角度。

提供一个值时，用于设置旋转角度。常用的旋转角度单位有：

  • deg：角度单位，代表角度值。
  • rad：弧度单位，代表弧度值。
  • turn：圈单位，代表一圈的角度值。

示例代码如下：

css
.box {
  transform: rotate(45deg); /* 元素旋转45度 */
  transform: rotate(45rad); /* 元素旋转45弧度 */
  transform: rotate(0.5turn); /* 元素旋转0.5圈 */
}

倾斜 skew() 函数 ​

其实对于文本的倾斜，在 CSS 中可以使用 font-style: italic; 来实现。

有时需要对元素进行倾斜变形，可以使用 skew() 函数。

skew() 函数用于倾斜元素。

它是 skewX() 函数和 skewY() 函数的缩写。

提供一个值时，设置 X 轴的倾斜角度，提供两个值时，同时设置 X 和 Y 轴的倾斜角度。

html
<style>
  .container {
    width: 200px;
    height: 100px;
    background-color: orange;
  }
  .container:hover {
    transform: skew(20deg, 0);
  }
</style>

<div class="container">Hello world</div>