链式变形
变形常常是单独的,但是如果你想同时用到多种变形,代码也是可以快速整合的,特别是使用私有扩展。幸运的是,我们有一些内置的缩写:
#nav{ -moz-transform: translate(10, 25); -webkit-transform: translate(10, 25); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: scale(2, 1); -webkit-transform: scale(2, 1); }
这些变形可以被链到一起,从而让你的代码更高效:
nav{ -moz-transform: translate(10, 25) rotate(90deg) scale(2, 1); -webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1); }
这些属性的真正的威力是合并到一起。你可以移动、旋转、缩放并控制任何内联元素和块级元素而不使用JavaScript。一旦这些属性的支持变的更加广泛,我们就可以创建更丰富和更轻量的界面和应用。
transform-origin
transform-origin不是transform的一个子功能,但是和transform关系非常密切。它可以用来指定transform的起点,比如,rotate变形的默认起点是其中间,你可以将起点设置在左上角,或者左下角,这样rotate变形的结果就可能大不相同了。
transform-origin接受两个参数,它们可以是百分比,em,px等具体的值,也可以是left,center,right,或者 top,middle,bottom等描述性参数。几个例子:
.class1{-moz-transform-origin: 0 0; -webkit-transform-origin: 0 0; ... } .class2{-moz-transform-origin:100% 100%; -webkit-transform-origin:100% 100%; ...} .class3{-moz-transform-origin:top left; -webkit-transform-origin:top left; ...}
浏览器兼容性
该属性目前也只有webkit和firefox支持,而且需要添加各自的私有前缀。
出处:前端观察
责任编辑:bluehearts
上一页 你需要知道的CSS3动画技术 [3] 下一页 你需要知道的CSS3动画技术 [5]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
|