css变换

旋转、平移、缩放和倾斜

基本定义

旋转（Rotate）——元素绕着一个轴心转动一定角度。（transform: rotateX(xdeg)|rotateY(ydeg)|rotateZ(zdeg)）
平移（Translate）——元素向上、下、左、右各个方向移动（有点类似于相对定位）。 (transform: translate(x,y)|translateX(x)|translateY(y)|translateZ(z))
缩放（Scale）——缩小或放大元素。（transform: scale(x, y)|scaleX(x)|scaleY(y)）
倾斜（Skew）——使元素变形，顶边滑向一个方向，底边滑向相反的方向。（transform: skew(x, y)|skewX|skewY）

注意点

1. 使用变换的时候要注意一件事情，虽然元素可能会被移动到页面上的新位置，但它不会脱离文档流。你可以在屏幕范围内以各种方式平移元素，其初始位置不会被其他元素占用。当旋转某元素的时候，它的一角可能会移出屏幕边缘，同样也可能会遮住旁边其他元素的部分内容
2. 变换不能作用在<span>或者<a>这样的行内元素上。
3. 变换是围绕基点（point of origin）发生的。基点是旋转的轴心，也是缩放或者倾斜开始的地方。这就意味着元素的基点是固定在某个位置上，元素的剩余部分围绕基点变换（但translate()是个例外，因为平移过程中元素整体移动）。默认情况下，基点就是元素的中心，但可以通过transform-origin属性改变基点位置。
4. 可以对transform属性指定多个值，用空格隔开。变换的每个值从右向左按顺序执行，

三维（3D）变换

旋转和平移都可以在三个维度上实现：X轴、Y轴和Z轴。

控制透视距离

为页面添加3D变换之前，我们需要先确定一件事情，即透视距离（perspective）。变换后的元素一起构成了一个3D场景。接着浏览器会计算这个3D场景的2D图像，并渲染到屏幕上。我们可以把透视距离想象成“摄像机”和场景之间的距离，前后移动镜头就会改变整个场景最终显示到图像上的方式。

如果镜头比较近（即透视距离小），那么3D效果就会比较强。如果镜头比较远（即透视距离大），那么3D效果就会比较弱。

设置透视距离位置的不同造成的区别

首先，我们为四个元素添加旋转效果，使用rotateX()让它们向后倾斜（如下图）。因为每个元素旋转同样的角度，并且设置了相同的perspective()，所以它们看上去一样。

<div class="row">
  <div class="box">One</div>
  <div class="box">Two</div>
  <div class="box">Three</div>
  <div class="box">Four</div>
</div>
//css
.row {
  display: flex;
  justify-content: center;
}

.box {
  box-sizing: border-box;
  width: 150px;
  margin: 0 2em;
  padding: 60px 0;
  text-align: center;
  background-color: hsl(150, 50%, 40%);
  transform: perspective(200px) rotateX(30deg);//transform中设置了相同的perspective()
}

但有时候我们希望多个元素共享同一套透视距离，就仿佛它们处于相同的3D空间中。下图用来演示这种情况。这里有四个相同的元素，但它们都向着远方的一个相同的交汇点延伸，就仿佛把四个元素放一起然后拍摄一张整体的照片。要实现这种效果，需要为它们的父元素设置perspective属性。

.row {
  display: flex;
  justify-content: center;
  perspective: 200px;//为它们的父元素设置perspective属性
}

.box {
  box-sizing: border-box;
  width: 150px;
  margin: 0 2em;
  padding: 60px 0;
  text-align: center;
  background-color: hsl(150, 50%, 40%);
  transform: rotateX(30deg);
}

上面两种一个在transform设置perspective，一个直接设置为属性perspective，要注意

perspective-origin属性

默认情况下，透视距离的渲染是假设观察者（或者镜头）位于元素中心的正前方。perspective-origin属性可以上下、左右移动镜头的位置

backface-visibility属性

如果你使用rotateX()或者rotateY()旋转元素超过90度，就会发现一些有趣的事情：元素的“脸”不再直接朝向你。它的“脸”转向别的地方，你会看到元素的背面。

这就是元素的背面。默认情况下背面是可见的，但我们可以为元素设置backface-visibility:hidden来改变它。添加这条声明之后，元素只有在正面朝向观察者的时候才可见，朝向别处的时候不可见。