css3的3D和2D

2023-08-07

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的相关教程结束。

《css3的3D和2D.doc》

下载本文的Word格式文档,以方便收藏与打印。