CSS3转换

2D

translate

/* 移动x→,y↓ */
/* 百分号移动距离是盒子自身的比较 */
transform: translate(100px,100px);
transform: translateX(100px);
transform: translateY(100px);

优点：不影响其他盒子位置
缺点：对于行内元素无效

rotate

/* deg一定要带单位 */
transform: rotate(45deg);

transition: all 0.2s;

/* 旋转中心：像素，单词，百分比 */
transform-origin: left bottom;

scale

transform: scale(2,2);

优点：不影响其他盒子

一起使用
按顺序 加空格

animation

.box{
  width: 200px;
  height: 200px;
  background-color: tomato;
  /* 使用动画 */
  animation: move;
  /* 持续时间 */
  animation-duration: 2s;
}
/* 定义动画 */
@keyframes move{
  0%{
    transform: translate(0px);
  }
  100%{
    transform: translate(1000px);
  }
}

3D

translate3d(x,y,z);

向外正值，px

perspective

模拟眼睛到屏幕的举例，单位px
写在父盒子上，透视越小，子盒子越大

rotate3d(x,y,z,deg)

transform:rotateX(180deg);

transform-style：preserve-3d;
使子元素保持3d环境