位移 translate

语法: transform: translate(x, y); transform: translateX(x); transform: translateY(y);

他和margin的区别 margin移动盒子会影响其余的盒子。把其他人挤走 位移translate移动盒子不会影响其他的盒子。不脱标 位移经常需要的场景： 比如 盒子上下移动不影响其他盒子 盒子水平和垂直居中，写法简单 轮播图的动画效果 移动的时候可以写百分比，如果使用的百分比，移动的是盒子自身的宽度 transform: translateX(100%);

应用- 盒子水平和垂直

.inner { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background-color: skyblue; transform: translate(-50%, -50%); }

/* .inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 200px;
  height: 200px;
  background-color: skyblue;
} */


## 旋转 rotate

transform: rotate(45deg);    一定写单位   1turn=一圈

### 设置中心点 transform-origin
 transform-origin: right bottom;
 
 
 ## 缩放 scale
 
 transform: scale(1.2)；
 它比这宽度和高度最大的`优势`： 他是用中心点来进行缩放的，同样他**不会**影响其他的盒子。
 
 ## 倾斜skew
 /* skew(第一个值X轴倾斜,第二个值Y轴倾斜); */

transform: skew(-45deg, 0);

渐变

基本语法:

Document .box { width: 400px; height: 400px; /* 默认是垂直渐变色 */ /* background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); */ /* 通过方位名词调整 to就是从哪里开始*/ background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); /* 通过角度渐变 注意带单位deg*/ background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)); }

<div class="box">

</div>