CSS2D、3D、过渡、动画基础概括

CSS的2D转换:

可以对元素进行移动、缩放、转动、拉长或拉伸。

 

translate()

rotate()

scale()

skew()

matrix()

 

transform:ratate(0deg):顺时针旋转

tansform:translate(50px,100px);右移50px，向下平移100px

transform:scale(2,3)横向增大2倍，纵向增大3倍；

transform:skew(amgle,angle)x轴向上倾斜y轴向上倾斜

matrix()方法包含六个数值，旋转、缩放、移动、倾斜；

matrix(a,b,c,d,e,f)

对应的矩阵关系是：

a  c    e               x           ax+cy+e   横坐标效果

b  d    f          *    y     =    bx+dy+f  纵坐标效果

0   0   1               1            0+0+1       参数

 

ad表示缩放倍数；

ef表示平移的量

bc表示选装角度：

rotate是指用sin或者cos表示

skew使用tan表示

 

CSS的3D转换:

 

rotateX()

以X为轴旋转

rotateY()

以Y为轴旋转

 

transform-orgin允许改变元素的位置可以为left center right length %

transform-orgin:left 20% 40%;

 

transform-style:flat/preserve-3D[2D平面呈现，3D平面呈现

 

perspective:透视图

它是用于定义一个元素子元素的透视图，而不是定义元素的本身：

比如：

<div id="div1"><div id="div2"></div></div>

定义div1是获得div2的透视图

 

perspective:500

 

指定了观察者与z=0的位置与观察者的距离 ，大小程度与该属性值有关(近大远小)。该元素只在三维模型中起到透视效果；

perspective-orgin:X,Y是基于XY轴的变化，允许改变元素的底部位置；

在X上   左（负px或者小于50%）右（正px或者大于50%）

在Y上   同理

目前浏览器几乎不支持该属性可以在

用-WEBIT-运行在CHROME和SAFARI浏览器上

perspective-origin：X Y可以用来设置3D元素底部的距离；

X可以用left（方位）length(长度) 10%（百分比），其中百分比是相当于父元素的长度为单位，向X轴正方向移动

Y同理；

 

backface-visibility属性

 

可以设置两个值：visible和hidden，主要为设置背面可不可见，一般来说如果设置可见，当翻转180deg就会让元素成镜像，可用这个属性设置3d实体效果；比如构成一个长方体或者其它翻转样式。

 

matrix3d(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0)共16个值构成4*4的矩阵；

了解之前先认识一下3d其它属性:

translate3d(x,y,z)注意3d需要在ransform后面打出来，2d不需要

translateX(x)       y/z同；

scale(x,y,z)

scaleX() 同

 

rotate3d(x,y,z,angle)

rotateX（）等同

perspective（n）和perspective-origin

对应的矩阵关系：

 

2d矩阵为3 3的矩阵，取六个值，即 matrix(a, b, c, d, e, f)；而3d矩阵为4 4的矩阵，取16个值，即 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1)，它相当于2d的 matrix(a, b, c, d, e, f)，并且只是其中一种取值。

　　一、matrix3d的基本变形  

　　1、matrix3d的基准数值

 

　　matrix3d(1, 0, 0, 0, 

　　0, 1, 0, 0, 

　　0, 0, 1, 0, 

　　0, 0, 0, 1 

 ) 

　　从表达式中可以看出，16个值分为四组，每组四个值，第一组值第一个为1，第二组值第二个为1，第三组值第三个为1，第四组值第四个为1，有一种序号上的递增关系。

　　2、matrix3d矩阵放大缩小

 

　　(x y z 1)(2, 0, 0, 0,//x方向放大2倍  

　　0, 3, 0, 0,//y方向放大3倍  

　　0, 0, 4, 0,//z方向放大4倍  

　　0, 0, 0, 1 

 ) 

　　=(x*2, y*0, z*0, 1*0, 

　　x*0, y*3, z*0, 1*0, 

　　x*0, y*0, z*4, 1*0, 

　　x*0, y*0, z*0, 1*1 

 ) 

　　3、matrix3d矩阵只有平移

 

　　matrix3d(1, 0, 0, 0, 

　　0, 1, 0, 0, 

　　0, 0, 1, 0, 

　　tx,ty,tz, 1 

 ) 

　　4、matrix3d矩阵只有旋转

　　1）只有X轴上的旋转，没有平移、扩大、缩小

 

　　matrix3d(1, 0, 0, 0, 

　　0, Math.cos(角度值)，Math.sin(-角度值), 0, 

　　0, Math.sin(角度值), Math.cos(角度值),  0, 

　　0, 0, 0, 1 

 ) 

　　2）只有Y轴上的旋转，没有平移、扩大、缩小

 

　　matrix3d(Math.cos(角度值), 0，Math.sin(角度值), 0, 

　　0, 1, 0, 0, 

　　Math.sin(-角度值), 0，Math.cos(角度值),0, 

　　0, 0, 0, 1 

 ) 

　　3）只有Z轴上的旋转，没有平移、扩大、缩小

 

　　matrix3d(Math.cos(角度值), Math.sin(-角度值), 0, 0, 

　　Math.sin(角度值), Math.cos(角度值),  0, 0, 

　　0, 0, 1, 0, 

　　0, 0, 0, 1 

 ) 

　　二、matrix3d矩阵应用实例  

　　1、matrix3d取基准数值

　　html代码

<divclass="matrix3d">基准数值：transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)</div>  

　　CSS样式：

　　.matrix3d{transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);width:230px;height:130px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}  

 基准数值： 

 transform: 

 matrix3d(1,0,0,0, 

 0,1,0,0, 

 0,0,1,0, 

 0,0,0,1)  

　　从图中可以看出，长方形没有任何变化。

　　2、matrix3d向上旋转

　　html代码

<divclass="matrix3d-tr">transform:matrix3d(0.826357, -0.198658, -0.506952, 0,0, 0.870835, -0.8, 0, 0.580619, 0.421769, 0.692157, 0, 0,0,0,1)</div>  

　　CSS样式：

　　.matrix3d-tr{transform:matrix3d(0.826357, -0.198658, -0.506952, 0, 0, 0.870835, -0.8, 0, 0.580619, 0.421769, 0.692157, 0, 0, 0, 0, 1);width:300px;height:130px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

　　从图中可以看出，长方形的左下点往下移了一点，并以左下点为旋转顶点向上旋转了一定的角度。

　　3、matrix3d向下旋转并拉伸

　　html代码

<divclass="matrix3d-br">transform:matrix3d(0.826357, -0.198658, -0.506952, 0, 0, 0.870835, -0.8, 0, 0.580619, 0.421769, 0.692157, 0, 0,0,0,1)</div> 

 

CSS的过渡:

transition:width 时间 height 时间 transform 时间；

这里的属性需要在属性中定义过的

设置变化的时间（可以一次设置多个变化）。

一般transition设置在将要发生变化的版块上，而不是动作中

 

transition-property：规定应用过渡属性的名称相当transition中的各个属性；

transition-duration:规定过渡发生的时间

transition-timing-function:规定过渡发生的时间曲线，linnear线性ease慢速开始然后变快，最终慢速结束  ease-in慢速开始的过渡效果ease-out慢速结束的过渡属性

ease-in-out规定慢速开始和结束的过渡效果cubic-bezier(n,n,n,n)可以设置0~1之间的值，用于控制速度。

transition-delay:能够规定过渡从什么时候开始，即延迟过渡。

transition可以修改颜色，透明度等等，可以通过设置颜色透明度变化实现更多的变换。

CSS动画:

动画和过渡的区别在于动画可以不需要事件触发，而且能够规定几乎完整的过程。

@keyframes规则创建动画

animation用来设置动画变化的时间，模式等

@keyframes myfirst {

 

from { background: red ; } 

to { background: yellow ; } 

 

}

animation在所需要变化的元素中使用

 

animation-name:关键帧的名字

animation-duration：指定动画需要多长时间完成

animation-timeing-function设置动画将如何完成一个周期

linear  ease ease-in ease-out ease-in-out cubic-bezier(n,n,n,n)可以设置0~1之间的值；

animation-delay:设置动画启动的延迟时间

animation-iteratin-count设置动画的播放次数number或者infinite永远

animation-fill-mode当动画不播放时要用到的元素样式none没有任何样式到目标元素forwards动画结束后将动画应用的属性值；在奇数次正向播放在偶数次反向播放

backwards动画将应用在animation-delay定义的属性值（当animation-direction为normal或者alternate时或to关键帧的值（当animation-direction=reverse或alternate-reverse时）在奇数次反向播放在偶数次正向播放

both动画遵循forwards或者backwards的规则，也就是说动画在两个方向上扩展动画属性

initial inherit不继承与继承

 

animation-play-state动画是否正在运行或者暂停（对于js比较重要）paused暂停动画running正在运行的动画。

一般animation所需要的浏览器版本都比较高还是要考虑到兼容性问题

 

简写animation属性：

animation:myfrist 5s linear 2s infinite alternate;