CSS3 transform详解,关于如何使用transform
transform是css3的新特性之一。有了它可以box module变的更真实,这篇文章将全面介绍关于transform的使用。
transform的作用
transform可以让元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。 这些属性定义上都从属于transform,因此把它们直接作为transform的value来表达。
transform的兼容写法
当然使用css3的实现一般都不会兼容低版面的IE,这里整理其他浏览器的兼容写法如下:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
办公资源网址导航 https://www.wode007.com
说明:Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。Opera 只支持 2D 转换。
transform语法
transform: none|transform-functions;
none:表示不进么变换;表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一个元素进行transform的多种属性操作,例如rotate、scale、translate三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。
transform-functions取值:transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素,他有几个属性值参数:rotate;translate;scale;skew;matrix。
transform常用属性
transform:rotate():
旋转; 单位deg,设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。
transform:translate():
移动/位移;向右向上为整数,向左向下位移则为负“-”。
translate(x,y)水平方向和垂直方向同时移动(也就是X轴和Y轴同时移动);translateX(x)仅水平方向移动(X轴移动);translateY(Y)仅垂直方向移动(Y轴移动)。
transform:scale():
比例;比例放大用整数,缩小则为负“-”。
scale(X,Y)是用于对元素进行缩放,可以通过transform-origin对元素的基点进行设置,同样基点在元素中心位置;基中X表示水平方向缩放的倍数,Y表示垂直方向的缩放倍数,而Y是一个可选参数,如果没有设置Y值,则表示X,Y两个方向的缩放倍数是一样的。并以X为准。
scaleX() : 使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数。scaleX表示元素只在X轴(水平方向)缩放元素,他的默认值是(1,1)。
scaleY() : 使用 [1,sy] 缩放矢量执行缩放操作,sy为所需参数。scaleY表示元素只在Y轴(垂直方向)缩放元素。
transform:skew():
倾斜/扭曲;参数表示倾斜角度,单位deg。
skew(x,y)使元素在水平和垂直方向同时扭曲(X轴和Y轴同时按一定的角度值进行扭曲变形);
skewX(x)仅使元素在水平方向扭曲变形(X轴扭曲变形);
skewY(y)仅使元素在垂直方向扭曲变形(Y轴扭曲变形);
transform:matrix
js对transform的取值和赋值
赋值如下:
element.style.webkitTransform = "";
element.style.webkitTransform = "";
element.style.MozTransform = "";
element.style.msTransform = "";
element.style.OTransform = "";
element.style.transform = "";
取值通过:
if(element.currentStyle){
return element.currentStyle['transform'];
}else{
return getComputedStyle(element,null)['transform'];
}
当然transform的属性还对应3D的,这块平时我们使用的比较少,这里就没做具体的介绍了,大家有详情可以去深入研究。
最新文章
- python获取字典的key列表
- nyoj------79拦截导弹
- activiti自定义流程之整合(四):整合自定义表单部署流程定义
- 三次握手wireshark抓包分析,成功握手和失败握手
- uva10635 LCS映射转LIS
- linux统计单词数
- AI 人工智能 探索 (九)
- 获取android项目的数据库地址或者数据库名
- [转]linux查看日志文件内容命令
- Hibernate异常之命名查询节点未找到
- jmeter添加断言
- 基于IdentityServer4 实现.NET Core的认证授权
- python format(格式化)
- python大法好——Python 面向对象
- [LeetCode] 129. Sum Root to Leaf Numbers_Medium tag: DFS
- C#题目及答案(2)
- 海康抓拍机SDK开发
- hbase 无法打开60010网页
- Bitbucket - 用git 用法
- sklearn六大板块