关于css: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 来扭转它。增加这条申明之后，元素只有在侧面朝向观察者的时候才可见，朝向别处的时候不可见。