首页 > 代码库 > css3的3D和2D

css3的3D和2D

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,播放次数,

css3的3D和2D