css3的transition

来源：互联网发布：骨架软件编辑：程序博客网时间：2024/06/07 00:46
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div{width: 100px;height: 100px;border: 1px solid #f66;margin: 5px;/*第一个表示可变换的所有的属性的集合的统称transition-property 第二个表示的是动画的时间transition-duration 第三个表示的是执行动画的延迟，可以省略transition-delay 第四个可以是运动的时间曲线transition-timing-function 默认是ease   慢-快-慢 linear     匀速  * */-webkit-transition: all 1s linear;-moz-transition: all 1s linear;-ms-transition: all 1s linear;-o-transition: all 1s linear;transition: all 1s linear;/*-webkit-transform-origin: left top;-moz-transform-origin: left top;-ms-transform-origin: left top;-o-transform-origin: left top;transform-origin: left top;*/}#translate:hover{-webkit-transform: translate(100px,100px);-moz-transform: translate(100px,100px);-ms-transform: translate(100px,100px);-o-transform: translate(100px,100px);transform: translate(100px,100px);}#rotate{/*-webkit-transform: rotate(0deg) translate(0px,-100px) scale(2);-moz-transform: rotate(0deg) translate(0px,-100px) scale(2);-ms-transform: rotate(0deg) translate(0px,-100px) scale(2);-o-transform: rotate(0deg) translate(0px,-100px) scale(2);transform: rotate(0deg) translate(0px,-100px) scale(2);*//*延时时间设置*//*-webkit-transition-delay: 1s;-moz-transition-delay: 1s;-ms-transition-delay: 1s;-o-transition-delay: 1s;transition-delay: 1s;*/-webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0);-moz-transform: matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0);-o-transform: matrix(0.866,0.5,-0.5,0.866,0,0);transform: matrix(0.866,0.5,-0.5,0.866,0,0);}#rotate:hover{/*如果度数位正，那么是顺时针旋转，反之逆时针旋转*//*-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);*/-webkit-transform: rotate(360deg) translate(0px,0px) scale(1);-moz-transform: rotate(360deg) translate(0px,0px) scale(1);-ms-transform: rotate(360deg) translate(0px,0px) scale(1);-o-transform: rotate(360deg) translate(0px,0px) scale(1);transform: rotate(360deg) translate(0px,0px) scale(1);}#scale{-webkit-transform: rotate(30deg);-moz-transform: rotate(30deg);-ms-transform: rotate(30deg);-o-transform: rotate(30deg);transform: rotate(30deg);}#scale:hover{/*一个参数表示X和Y都在缩放，两个参数，第一个表示的是X方向，第二个表示的是Y方向*/-webkit-transform: scale(1.2);-moz-transform: scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);}#skew{-webkit-transform: skew(88deg);-moz-transform: skew(88deg);-ms-transform: skew(88deg);-o-transform: skew(88deg);transform: skew(88deg);}/*#skew{-webkit-transform: skew(0,90deg);-moz-transform: skew(0,90deg);-ms-transform: skew(0,90deg);-o-transform: skew(0,90deg);transform: skew(0,90deg);}*//*#skew{-webkit-transform: skew(30deg,30deg);-moz-transform: skew(30deg,30deg);-ms-transform: skew(30deg,30deg);-o-transform: skew(30deg,30deg);transform: skew(30deg,30deg);}*/</style></head><body><div id="translate">translate</div><div id="rotate">rotate</div><div id="scale">scale</div><div id="skew">skew</div><div id="">skew</div><!--matrix  a     b       c       d      e     f1、e,f不为0----平移translate(e,f)2、a=d=1,且b<1且从<1    tany=b,tanx=c;  x方向扭曲角度的正切值为c,y方向扭曲角度的正切值为b3、a,b,c,d<1,且a = d,且b=-c，旋转，旋转角度就是的正弦值就是b,余弦值就是a、可以求出对应的角度4、如果b=c=0,a!=0,d!=0,则表示缩放，x方向缩放a,y方向缩放b--></body></html>
1 0