css3 transform
发布在js菜鸟中的菜鸟开始学飞2015年12月28日view:3287
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

变形–旋转 rotate()

旋转20度

-webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); transform:rotate(20deg);

(上下翻转) enter image description here

变形--扭曲(倾斜) skew() -webkit-transform: skew(45deg); -moz-transform: skew(45deg); transform:skew(45deg);

(左右倾斜) enter image description here

变形–缩放 scale(x,y)

缩放0.8倍

-webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8);

(放大倍数) enter image description hereenter image description here

变形–位移(移动) translate()

-webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);

动画–过渡属性

transition-property

• transition-property:指定过渡或动态模拟的CSS属性

• transition-duration:指定完成过渡所需的时间

• transition-timing-function:指定过渡函数

• transition-delay:指定开始出现的延迟时间

div{

width:100px;

-webkit-transition-property: width;

transition-property: width;

-webkit-transition-duration:.5s;

transition-duration:.5s;

-webkit-transition-timing-function: ease-in;

transition-timing-function: ease-in;

-webkit-transition-delay: .18s;

transition-delay:.18s;

}

评论
发表评论
暂无评论
WRITTEN BY
古道川
技法无高低、功力有深浅。
TA的新浪微博
PUBLISHED IN
js菜鸟中的菜鸟开始学飞

今天不是特殊的日子、我想要的,我会去争取!把自己驾到台风口上,学飞!!!

技法我高低,功力有深浅!呵呵~

我的收藏