2D和3D效果

一、2D效果

1.CSS3过渡

• 通过CSS3，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
  要实现这一点，必须规定两项内容：
  规定希望把效果添加到哪个CSS属性上
  规定效果时长
  下面列出转换属性：

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的CSS属性名称
transition-duration	定义过渡效果花费的时间。默认是0
transition-timing-function	规定过渡效果的时间曲线。默认是ease
transition-delay	规定过渡效果何时开始。默认是0

具体说明：

• 【语法】：transition-property：none|all|property；
  【说明】：transition-property属性规定应用过渡效果的CSS属性名称。当指定的CSSshuxing 改变时，过渡效果将开始
  none：没有属性会获得过渡效果
  all：所有属性都将获得过渡效果
  property：定义应用过渡效果的CSS属性名称列表，列表以逗号分隔
• 【语法】：transition-duration：time
  【说明】：transition-duration属性规定完成过渡效果需要花费的时间以秒或毫秒计
  time：默认值是0
• 【语法】：transition-timing-function：linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier（n，n，n，n）
  【说明】：transition-timing-function属性规定过渡效果的速度曲线
  linear：规定以相同速度开始至结束的过渡效果
  ease：规定慢速开始，然后变快，然后慢速结束的过渡效果
  ease-in：规定以慢速开始的过渡效果
  ease-out：规定以慢速结束的过渡效果
  ease-in-out：规定以慢速开始和结束的过渡效果
  cubic-bezier（n，n，n，n）：n为0-1

2. 2D变形

transform字面上就是变形的意思
在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
【语法】：transform：none|rotate|scale|skew|translate|matrix
【说明】：none：表示不进行变换；
可以同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate三种，需要使用空格隔开

• 旋转rotate
  rotate（角度）单位是deg
• 移动translate
  translate（x轴，y轴）
• 缩放scale
  scale（X,Y）缩放基数为1
• 扭曲skew
  skew（X,Y）角度单位同上
• 改变元素基点 transform-origin
  可以再transform之前改变基点位置
  【语法】：transform-origin：X Y；

二、3D效果

1、3D效果

3D位移：

transl3d（）
X：从左至右移动
Y:从上至下移动
Z:以方框中心为原点，变大

3D旋转：

rotateX（）rotateY（）、rotateZ（）
X:以X轴从下向上旋转
Y:以y轴从左向右旋转
Z:以中心为原点，顺时针旋转

3D缩放：

scale3d（）
X:以方框y轴，左右变宽
Y:以方框x轴，上下变高
Z:看不出变换

2、3D Transform转换属性

属性	描述
transform	向元素应用2D或3D转换
transform-origin	允许你改变被转换元素的位置
transform-style	规定被嵌套元素如何在3D空间中显示
perspective	规定3D元素的透视效果
perspective-origin	规定3D元素底部位置
backface-visibility	定义元素在不面对屏幕时是否可见

• 【语法】：transform-style：flat|preserve-3d
  【说明】：规定被嵌套元素如何在3D空间中显示
  flat：子元素将不保留其3D位置
  preserve-3d：子元素保留其3D位置
• perspective属性：透视，视角
  perspective取值为none或者不设置，就没有真3D空间
  perspective取值越小，3D效果越明显
  perspective值无穷大或者是0时与none效果一样
  perspective可以写在父元素上也可以下载元素本身上，有多个元素的话效果是不一样的

3、CSS3关键帧动画

语法：@keyframes animationname{
keyframes-selector{css-style}
}
说明：
animationname：声明动画的名称
keyframes-selector：用来划分动画的时长，可以用百分比形式，也可以使用“from”到‘to’的形式

@keyframes规则和动画属性

属性	描述
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称
animation-duration	规定动画完成一个周期所花费的秒或毫秒
animation-timing-function	规定动画速度曲线
animation-delay规定动画从何时开始
animation-iteration-count	规定动画被播放的次数