定义

实现移动、旋转、缩放

移动translate

很简单

transform: translate(50px,50px)

这是X,Y 都移动了，

正值是X往右，Y向下

或者X,Y分开写

transform: translateX(80px) translateY(80px);

特点

保留原来的位置，切不会影响其它元素

半分比单位是相当于自身元素的：translate(50%,50%)

对行内标签没有效果

用法

一般是用在鼠标放在上面会有短距离的位移，搭配transition一起使用

或者水平垂直居中

#two{
  width: 250px;
  height: 250px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

很简单就是先绝对定位50%，再移动-50%就行了

旋转rotate

transform: rotate(90deg)

顺时针是正数，逆时针负数

deg是度数单位

默认的旋转中心点实元素中心点

可以做可以旋转的三角，不经过向下，经过向上，自己研究去

设置旋转中心点

transform-origin: left bottom;
transform-origin: 100% 0;
transform-origin: 20px 30px;

这三种写法都是可以的

缩放scale

transform: scale(0.5,0.5)

1就是原来的倍数，0.5自然就是缩小，同样可以设置中心点transform-origin

优势就是可以设置中心点

综合写法

css3 2D转换综合写法 格式 transform:translate() rotate() scale() 记住一定要先位移，再其它