css3的3D和2D
浏览数：40 /
时间：2015年06月09日
css3的3D旋转：
rorateX():参数为正值时，盒子是围绕x轴，完成从Y轴正方向到Y轴负方向的旋转，视觉上呈现高度上的变化。
rorateY():参数为正值时，盒子是围绕Y轴，完成从X轴正方向到X轴负方向的旋转，视觉上呈现盒子宽度上的变化。
css2D旋转：
translate(a,b):a,b,均大于0时，a表示是在水平方向的位移（从左向右），b是垂直方向的位移（从上往下），
rotate(a):a>0,在水平面上顺时针旋转的度数，a<0时，在水平面上逆时针旋转度数。
scale(x,y):x是指盒子宽度的变化，y是指盒子高度的变化，0-1盒子缩小，>1盒子变大。
skew(x,y):沿x轴翻转x度数，沿y轴翻转y度数。
matrix()：可以整合所有2D的转换方法，包括六个参数：a，b,c,d,e,f。
transform：属于css属性，上述方法属于该属性的值。
div{
transform:rorate(30deg);}
css3的过渡：
transition: width 1s linear 2s；
四个属性：要使用过渡的属性，过渡的时间，过渡的线性路线，过渡效果开始的时间。\
css3的动画：
设置定义动画
from~to
@keyframes myfirst { from {background: red;} to {background: yellow;} }
0%~100%
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
绑定动画：
div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }
animation: myfirst 5s linear 2s infinite alternate;
常用几个属性：1，动画名称，2，动画周期时间，3，动画速度曲线，4，动画开始时间，5，播放次数，
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
