网站设计

当前位置:网站首页 > 新闻中心 > 网站设计
css3 transform
 【发布时间:2016-2-17 9:23:16】 【点击次数:273】 打印文章

ss3学习 理论之动画

transform

语法:none|<transform-function>[<transform-function>]*    初始值是none。

transform-function函数取值:

matrix():定义矩阵变换。

translate():移动元素对象。

scale():缩放元素对象。

rotate():旋转元素对象。

skew():倾斜元素对象。

例如(兼容浏览器):

  1.rotate()函数:transform: rotate(-90deg);-o-transform: rotate(-90deg);-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

  2.scale()函数:transform: scale(2);-o-transform: scale(2);-moz-transform: scale(2);-webkit-transform: scale(2);

  当为scale传递不同的参数值时,缩放动画效果是不同的。scale(1,2)意思是宽度保持不变,高度变为原来的2倍。scale(1,-2)意思是宽度保持不变,高度变为原来的2倍且旋转180度。

  3.translate()函数:transform: translate(4px, 6px);-o-transform: translate(4px, 6px);-moz-transform:translate(4px, 6px);-webkit-transform: translate(4px, 6px);参数可以是负的像素值。

  4.skew()函数:transform: skew(30deg, -20deg);-o-transform: skew(30deg, -20deg);-moz-transform: skew(30deg, -20deg);-webkit-transform: skew(30deg, -20deg);会改变元素的形状,而rotate函数不会改变元素的形状。

  5.matrix()函数:transform: matrix(3,2,3,5,0,0);-o-transform: matrix(3,2,3,5,0,0);-moz-transform: matrix(3,2,3,5,0,0);-webkit-transform: matrix(3,2,3,5,0,0);参数为6个数值。

江西国信网络科技有限公司-网易有道国信创业基地2000家企业的共同见证! 咨询电话:0791-8579 3333
人事QQ:在线咨询人事热线:0791-88258895
总部热线:0791-85793333,多人值班,受理所有业务
售后问题处理,请咨询售后技术。为避免丢失消息,请尽量添加好友
杜经理:
18179249060
邓经理:
18170215399

处理:投诉与建议相关

我们会全力以赴满足您的服务请求

余经理:
15170418623

处理:代理、合作、大客户