css3 3D动画笔记

要理解的一些css属性

1.transform: none | transform-functions;用于将元素缩放（scale），旋转（rotate），移动（translate），扭曲（skew）等
能调用的方法有：
注意： 在3D操作中，本人设的坐标系为垂直屏幕向外方向为z轴，屏幕向上方向为y轴，屏幕向右方向为x轴

值	描述
none	定义不进行转换
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)	定义 2D 移动 transform:translate(20px,30px)是将元素移动到横坐标20px，纵坐标30px的地方
translate3d(x,y,z)	定义 3D 移动。
translateX(x)	定义移动，只移动 X 轴
translateY(y)	定义移动，只移动 Y 轴
translateZ(z)	定义 3D 移动，只移动 Z轴
scale(x,y)	定义 2D 缩放，1是默认值，大于1是放大，小于1是缩小
scale3d(x,y,z)	定义 3D 缩放，1是默认值，大于1是放大，小于1是缩小
scaleX(x)	通过设置 X 轴的值来定义缩放 transform:scaleX(.5)将x轴向中点缩放一半
scaleY(y)	通过设置 Y 轴的值来定义缩放transform:scaleY(.5)将y轴向中点缩放一半
scaleZ(z)	通过设置 Z 轴的值来定义 3D 缩放。
rotate(angle)	定义 2D 旋转，在参数中规定角度
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	以x轴为轴心，往x轴反方向看是顺时针旋转
rotateY(angle)	以y轴为轴心，往y轴反方向看是逆时针旋转
rotateZ(angle)	以z轴为轴心，往z轴反方向看是顺时针旋转
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。transform:skew(45deg, 30deg)以一个正方体为例，以该正方体的右上角参照点，则该正方体的右边向x轴正方向移动45度，该正方体的上边向y轴的正方向移动30度，连结四个点即可得出执行该扭曲代码后的正方体
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换
perspective(n)	为 3D 转换元素定义透视视图。使用该方法能让3d旋转的动画实现远大近小的视觉效果，使用方式：在3D动画的父节点中直接使用perspective: 800px，后面的数值设置得越大，3d效果越不明显，越小越明显

transition

.box{
      width: 100px;
      height: 100px;
      /* margin: 50px auto; */
      /* float: right */
      background-color: #f00;
    }
.box:hover{
  width: 10px;
  transition:width 1s ease-in 0.1s; 
  /* 鼠标悬浮的时候，盒子box的width由100向左收缩至10px，
 	 若.box设置了margin: 50px auto;则向中间收缩，若设置了float: right则向右收缩 */
}

/* 注意与animation区分 */
.box{
    width: 100px;
    height: 100px;
    /* margin: 50px auto; */
    /* float: right */
    background-color: #f00;
    animation:animateRightBox1 1s ease-in-out forwards;  /* 执行animateRightBox1动画*/ 
  }
@keyframes animateRightBox1 {
  0%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); width: 285px; left: 0px}
  100%{transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg); width: 40px; left: -285px}
}