首页 > 代码库 > 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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。