3d变换我们首先要弄清楚坐标轴的方向， 3D变形的坐标轴则是X,Y,Z三条轴组成的立体空间，X轴正方向是朝右，Y周正方向是朝下，Z轴正方向是朝屏幕外
假定都是在三维空间中，平面坐标应该更加简单，刻画一个点的向量应该: [x, y, z]
所谓变换矩阵就是指，该矩阵 X 坐标向量 可以得到变换后的新坐标，满足如下性质
<"平移"后 的坐标>= <平行移动变换矩阵>X <原始坐标>
<"缩放"后 的坐标>= <缩放移动变换矩阵>X <原始坐标>
<"旋转"后 的坐标>= <旋转移动变换矩阵>X <原始坐标>
<"斜切"后 的坐标>= <斜切移动变换矩阵>X <原始坐标>
初始化的变换矩阵
初始化的变换乘法后的结果
所以matrix3d的默认值
观察者站轴的正方向看向负方向，旋转物体，逆时针为负，顺时针为正。
其中有
可以得到旋转矩阵
移动的变换矩阵
dx: x轴移动的距离
dy: y轴移动的距离
dz: z轴移动的距离
缩放的变换矩阵
斜切是最不好理解的，符合右手定则，如果y轴斜切角度，是指垂直Y轴逆时针旋转一定的角度后的坐标
在前端开发中，我们采用的动画方案有主帧动画 、 补间动画、骨骼动画 等等
借助css3的transform，我们可以实现很流畅的补间动画
如果物体发生了上面的几种变换，可以把上面所有矩阵依次序相乘，然后就得到了最终的变换矩阵
由此我们可以看出来 一个css变换举证 M 总可以写成一个
M = SRT
其中 S 是缩放举证 R 是旋转矩阵 T是缩放举证
变换过程中，我们可以对S R T 分别实现补间动画，来进行变换动画
transform：属性应用 2D 或 3D 转换。该属性允许我们对元素进行旋转(rotate)、缩放(scale)、移动(translate)、倾斜,扭曲(skew)，设置基点位置transform-origin:50% top
rotate: 是transform的值，定义2D或3D的旋转，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
2D：rotate( angle )定义 2D 旋转，在参数中规定角度。
3D：rotate3d( x , y , z , angle )定义 3D 旋转。
事例：2D:transform: rotate(45deg)3D:ransform: rotate3d(0,0,0,45deg)
scale: 是transform的值，定义 2D 或3D缩放，表示对当前元素的缩放。
2D：scale(x,y)定义 2D 缩放，对当前元素的宽度是原始大小的x倍，高度是原始大小的y倍。
3D：scale3d( x , y , z )定义 3D 缩放，对当前元素在x轴，y轴，z轴的缩放。
事例：2D:scale: scale(2,3)3D:ransform: scale3d(0,0,1)
translate ：是transform的值，定义 2D 或3D转换，表示对当前元素的位移。
2D：translate( x , y )定义 2D 转换，沿着 X 和 Y 轴移动元素。
3D：translate3d( x , y , z )定义 3D 转化。
事例：2D:transform: translate(50px,100px)3D:ransform: translate3d(50px,100px,50px)
skew： 是transform的值，定义倾斜，表示对当前元素的倾斜角度。
skew( x-angle , y-angle )定义 2D 倾斜，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜
事例：transform: skew(1deg,2deg)
transition属性：允许CSS属性值在一定的时间区间内平滑的过渡，只能设置 初始值和结束值，需要事件的触发，例如单击、获取焦点、失去焦点等
transition : transition-property transition-duration transition-timing-function transition-delay
transition-property :规定应用过渡的 CSS 属性的名称。
transition-duration :定义过渡效果花费的时间。默认是 0。
transition-timing-function :规定过渡效果的时间曲线。默认是 "ease"。
transition-delay :规定过渡效果延迟的时间。默认是 0。
事例： transition : width 2s ease-in-out 1s
animation属性：通过帧动画对当前元素的某些属性进行帧动画的播放，功能相似于transition，但更加的精确、可以控制到每一帧，高版本的浏览器还支持css或者JS控制停止动画 以及获取动画当前 状态等，请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。
@keyframes fadeIn {
0% {opacity:0}
100% {opacity:1}
}
事例：animation:fadeIn 5s infinite（fadeIn是帧动画的名称）infinite 无限循环
@keyframes fadeIn {
0% {opacity:0}
100% {opacity:1}
}
@keyframes fadeout {
0% {opacity:1}
100% {opacity:0}
}
@keyframes pendulu {
from {transform:rotate3d(0,0,1,0)}
5.5% {transform:rotate3d(0,0,1,-11deg)}
7% {transform:rotate3d(0,0,1,-12deg)}
16% {transform:rotate3d(0,0,1,9deg)}
17.5% {transform:rotate3d(0,0,1,10deg)}
26.5% {transform:rotate3d(0,0,1,-7deg)}
28% {transform:rotate3d(0,0,1,-8deg)}
36.5% {transform:rotate3d(0,0,1,5deg)}
38% {transform:rotate3d(0,0,1,6deg)}
46.5% {transform:rotate3d(0,0,1,-4deg)}
48% {transform:rotate3d(0,0,1,-5deg)}
57% {transform:rotate3d(0,0,1,3deg)}
58.5% {transform:rotate3d(0,0,1,4deg)}
66.5% {transform:rotate3d(0,0,1,-2deg)}
68% {transform:rotate3d(0,0,1,-3deg)}
75% {transform:rotate3d(0,0,1,1.5deg)}
76.5% {transform:rotate3d(0,0,1,2.5deg)}
82.5% {transform:rotate3d(0,0,1,-1deg)}
84% {transform:rotate3d(0,0,1,-2deg)}
90% {transform:rotate3d(0,0,1,1.5deg)}
95% {transform:rotate3d(0,0,1,-1deg)}
to {transform:rotate3d(0,0,1,0)}
}
@keyframes scale {
0% {transform:scale(0.9)}
100% {transform:scale(1)}
}
@keyframes cloud {
0% {transform:translateX(0)}
25% {transform:translateX(30%)}
50% {transform:translateX(60%)}
75% {transform:translateX(30%)}
100% {transform:translateX(0)}
}
@keyframes fadeInDown
{
0% {
opacity: 0
filter: alpha(opacity=0)
-webkit-transform: translate3d(0, -100%, 0)
transform: translate3d(0, -100%, 0)
}
100% {
opacity: 1
filter: alpha(opacity=100)
-webkit-transform: none
/* transform: none*/
}}
@-webkit-keyframes bounceIn {
0%,20%,40%,60%,80%,100% {
-webkit-transition-timing-function:cubic-bezier(.215,.61,.355,1)
transition-timing-function:cubic-bezier(.215,.61,.355,1)
}
0% {
opacity:0
filter:alpha(opacity=0)
-webkit-transform:scale3d(2,2,2)
transform:scale3d(2,2,2)
}
40% {
-webkit-transform:scale3d(.9,.9,.9)
transform:scale3d(.9,.9,.9)
}
60% {
-webkit-transform:scale3d(1.03,1.03,1.03)
transform:scale3d(1.03,1.03,1.03)
}
80% {
opacity:1
filter:alpha(opacity=100)
-webkit-transform:scale3d(.97,.97,.97)
transform:scale3d(.97,.97,.97)
}
100% {
-webkit-transform:scale3d(1,1,1)
transform:scale3d(1,1,1)
}
}
.rotate2d {
-webkit-animation-timing-function:linear
animation-timing-function:linear
-webkit-animation-name:rotate2d
animation-name:rotate2d
}
.box-bottle {
position:absolute
left:70%
width:pr(99)
height:pr(97)
background:url("#{$imgPath}btn-bottle.png")no-repeat
background-size:100%
transform-origin:35% 68%
opacity:0
z-index:10
div {
position:absolute
width:pr(18)
height:pr(35)
transform:translate3d(-150%,-20%,0)rotate3d(0,0,1,100deg)
transition:opacity .5s linear 1.5s
}
i {
position:absolute
width:pr(18)
height:pr(35)
background-repeat:no-repeat
background-size:100%
transform-origin:3000% 50%
opacity:0
&:nth-child(1) {
transition:transform 1s ease-out 1s,opacity .2s linear .9s
background-image:url("#{$imgPath}water1.png")
}
&:nth-child(2) {
transition:transform 1.1s ease-out .9s,opacity .2s linear .8s
background-image:url("#{$imgPath}water2.png")
}
&:nth-child(3) {
transition:transform 1.2s ease-out .8s,opacity .2s linear .7s
background-image:url("#{$imgPath}water3.png")
}
&:nth-child(4) {
transition:transform 1.3s ease-out .7s,opacity .2s linear .6s
background-image:url("#{$imgPath}water4.png")
}
&:nth-child(5) {
transition:transform 1.4s ease-out .6s,opacity .2s linear .5s
background-image:url("#{$imgPath}water5.png")
}
&:nth-child(6) {
transition:transform 1.5s ease-out .5s,opacity .2s linear .4s
background-image:url("#{$imgPath}water6.png")
}
}
&.active {
opacity:1
animation:pour 2.5s both
div {
opacity:0
}
i {
opacity:1
&:nth-child(1) {
transform:rotate3d(0,0,1,-25deg)
}
&:nth-child(2) {
transform:rotate3d(0,0,1,-25deg)translate3d(130%,50%,0)
}
&:nth-child(3) {
transform:rotate3d(0,0,1,-25deg)translate3d(260%,0,0)
}
&:nth-child(4) {
transform:rotate3d(0,0,1,-25deg)translate3d(0,150%,0)
}
&:nth-child(5) {
transform:rotate3d(0,0,1,-25deg)translate3d(130%,200%,0)
}
&:nth-child(6) {
transform:rotate3d(0,0,1,-25deg)translate3d(260%,150%,0)
}
}
}
}
border-radios 添加圆角边框
border-shadow：给框添加阴影 （水平位移，垂直位移，模糊半径，阴影尺寸，阴影颜色，insetr（内/外部阴影））
border-image：设置边框图像
border-image-source 边框图片的路径
border-image-slice 图片边框向内偏移
border-image-width 图片边框的宽度
border-image-outset 边框图像区域超出边框的量
border-image-repeat 图像边框是否平铺（repeat 平铺 round 铺满stretch 拉伸）
Background-size 背景图片尺寸
Background-origin规定background-position属性相对于什么位置定位
Background-clip 规定背景的绘制区域（padding-box，border-box，content-box）
Linear-gradient（）线性渐变
Radial-gradient（）径向渐变
Word-break：定义如何换行
Word-wrap：允许长的内容可以自动换行
Text-overflow：指定当文本溢出包含它的元素，应该干啥
Text-shadow：文字阴影（水平位移，垂直位移，模糊半径，阴影颜色）
Transform 应用于 2D3D 转换，可以将元素旋转，缩放，移动，倾斜
Transform-origin 可以更改元素转换的位置，（改变 xyz 轴）
Transform-style 指定嵌套元素怎么样在三位空间中呈现
rotate 旋转 translate（x，y）指定元素在二维空间的位移 scale（n）
定义缩放转换
Perspective（n）为 3D 转换 translate rotate scale
Transition-proprety 过渡属性名
Transition-duration 完成过渡效果需要花费的时间
Transition-timing-function 指定切换效果的速度
Transition-delay 指定什么时候开始切换效果
Animation-name 为@keyframes 动画名称
animation-duration 动画需要花费的时间
animation-timing-function 动画如何完成一个周期
animation-delay 动画启动前的延迟间隔
animation-iteration-count 动画播放次数
animation-direction 是否轮流反向播放动
