CSS-3 Transform 的使用
2015-09-25 10:36
423 查看
CSS3制作动画的几个属性:变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。这篇主要是 Transform 的使用。
Transform 字面上就是变形,改变的意思。在Css3中transform主要包括:旋转rotate, 扭曲skew, 缩放scale和移动translate以及矩阵变形matrix。语法
transform: rotate | scale | skew | translate |matrixnone:表示不进么变换;
一、旋转rotate
rotate() :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义。transform-origin定义的是旋转的基点,其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。如:transform:rotate(30deg);二、移动translate
移动translate我们分为三种情况:translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)。三、缩放scale
缩放scale和移动translate是极其相似,他也具有三种情况:scale(x,y)使元素水平方向和垂直方向同时缩放(也就是X轴和Y轴同时缩放);scaleX(x)元素仅水平方向缩放(X轴缩放);scaleY(y)元素仅垂直方向缩放(Y轴缩放),但它们具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,如果其值大于1元素就放大,反之其值小于1,元素缩小。四、扭曲skew
扭曲skew和translate、scale一样同样具有三种情况:skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形)。transform在不同浏览器内核下的书写规则
html //Mozilla内核浏览器:firefox3.5+ -moz-transform: rotate | scale | skew | translate ; //Webkit内核浏览器:Safari and Chrome -webkit-transform: rotate | scale | skew | translate ; //Opera -o-transform: rotate | scale | skew | translate ; //IE9 -ms-transform: rotate | scale | skew | translate ; //W3C标准 transform: rotate | scale | skew | translate ;
参考网址A
相关文章推荐
- 在Firefox开发者的上使用CSS usage,不显示操作按钮的问题
- 犀牛——第16章 脚本化CSS
- CSS3 rem
- Sublime Text 3 LESS、SASS、SCSS高亮插件、提示插件
- js添加导航栏选中样式
- 纯CSS+XHTML实现的二级导航菜单效果
- css 虚线
- a的样式设置css
- IE专用CSS,最全的CSS hack方式一览
- 纯 CSS 实现水平下拉菜单
- <转载>使用css让大图片不超过网页宽度
- <转载>DIV+CSS position定位方法总结
- <转载>使CSS文字图片div元素居中方法之水平居中的几个方法
- <转载>div+css布局教程之div+css常见布局结构定义
- <转载>Div+Css布局教程(-)CSS必备知识
- 5、第5节课CSS补充和html 标签讲解20150924
- margin和padding的区别
- 如何定义IE的文档兼容模式
- css3有用效果
- CSS3基础