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）css

注意点

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

三维（3D）变换

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

控制透视距离

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

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

设置透视距离位置的不一样形成的区别

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

<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属性。orm

.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属性能够上下、左右移动镜头的位置it

backface-visibility属性

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

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