CSS3 —— transform 问题

概述

本文首先介绍 transform 的使用，然后根据使用举例子，加深印象，最后补充一些面试过程中被问到的问题。

使用

通过修改坐标空间，CSS transforms 可以在不中断正常文档流的情况下改变受影响内容的形状和位置。

CSS transforms是使用一组 CSS 属性实现的，这些属性允许您将仿射线性变换应用于 HTML 元素。这些变换包括平面和 3D 空间中的旋转、倾斜、缩放和平移。

值得注意的是：只有在盒模型中，使用定位的元素才能够使用 transform 。根据经验（As a rule of thumb），盒子模型中的元素如果可以被定位，则需要它具有 display: block。

transforms属性

两个主要属性用于定义 CSS transforms：transform 和 transform-origin

• transform-origin
  指定原点的位置。默认情况下，它位于元素的中心并且可以移动。它由需要特定点作为参数的多种变换使用，例如旋转、缩放或倾斜。
• transform
  指定要应用于变换的元素。它是一个以空格分隔的变换列表，根据组合操作的要求，这些变换一个接一个地应用。按从右到左的顺序有效地应用复合变换。

例子

这是 MDN 徽标的未更改图像：

• 旋转
  以左下角为原点，旋转 90°（正顺负逆）

<img style="transform: rotate(90deg);
            transform-origin: bottom left;"
     src="logo.png">

结果：

• 倾斜和平移
  这是 MDN 徽标，倾斜 10 度并在 X 轴上平移 150 个像素。

<img style="transform: skewx(10deg) translatex(150px);
            transform-origin: bottom left;"
     src="logo.png">

结果：

3D transform

在 3D 空间中执行 CSS transform 要复杂一些。您必须首先通过给它一个透视图来配置 3D 空间，然后您必须配置 2D 元素在该空间中的行为方式。

perspective

要设置的第一个元素是 perspective 。透视是给我们3D印象的东西。元素离观察者越远，它们就越小。
此示例显示了在不同位置设置透视图的立方体。立方体收缩的速度由perspective属性定义。它的值越小，视角越深。

<table>
  <tbody>
    <tr>
      <th><code>perspective: 250px;</code>
      </th>
      <th><code>perspective: 350px;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers250">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers350">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>perspective: 500px;</code>
      </th>
      <th><code>perspective: 650px;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers500">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers650">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
  </tbody>
</table>

/* Shorthand classes for different perspective values */
.pers250 {
  perspective: 250px;
}

.pers350 {
  perspective: 350px;
}

.pers500 {
  perspective: 500px;
}

.pers650 {
  perspective: 650px;
}

/* Define the container div, the cube div, and a generic face */
.container {
  width: 200px;
  height: 200px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  backface-visibility: visible;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/* Define each face based on direction */
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/* Make the table a little nicer */
th, p, td {
  background-color: #EEEEEE;
  padding: 10px;
  font-family: sans-serif;
  text-align: left;
}

结果：

MDN 使用 CSS文档

面试问题

transform 会引起页面的重排吗？

不知道的重排/回流，可以自行百度或者留言我后期更新

答案：不会，因为 GPU 进程会为其开启一个新的复合图层，不会影响默认复合图层（就是普通文档流），所以并不会影响周边的 DOM 结构，而属性的改变也会交给 GPU 处理，不会进行重排。使 GPU 进程开启一个新的复合图层的方式还有 3D 动画，过渡动画，以及 opacity 属性，还有一些标签，这些都可以创建新的复合图层。这些方式叫做硬件加速方式。你可以想象成新的复合图层和默认复合图层是两幅画，相互独立，不会彼此影响。降低重排的方式：要么减少次数，要么降低影响范围，创建新的复合图层就是第二种优化方式。绝对布局虽然脱离了文档流，但不会创建新的复合图层，因此当绝对布局改变时，不会影响普通文档流的 render tree，但是依然会绘制整个默认复合图层，对普通文档流是有影响的。普通文档流就是默认复合图层，不要介意我交换使用它们如果你要使用硬件加速方式降低重排的影响，请不要过度使用，创建新的复合图层是有额外消耗的，比如更多的内存消耗，并且在使用硬件加速方式时，配合 z-index 一起使用，尽可能使新的复合图层的元素层级等级最高。
参考链接