转换是使元素改变形状、尺寸和位置的一种效果。通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸,可以大致分为2D转换和3D转换。下面介绍的是2D转换的相关知识点。

  首先,CSS中2D转换的形式是这样的:

 
 
 
选择器{

transform:转换函数(参数,参数);

}

而2D转换的函数一共分为五大类:
  • translate()   定义位移的函数;其中后面的参数分别是相对x轴,y轴的偏移的距离,单位为像素,形式:translate(30px,30px);表示相对x轴,y轴偏移30像素值,可以为负值,表示反向偏移;
  • rotate()    定义旋转的函数;定义元素顺时针旋转给定的角度,允许负值,元素将逆时针旋转,单位为角度deg(degree),形式rotate(30deg);元素顺时针旋转30度,负值表示逆时针选装;
  • scale()定义缩放的函数,根据给定的宽度(X 轴)和高度(Y 轴)参数,元素将进行缩放,单位为倍数,形式scale(2,2);表示元素将会按照原尺寸在x轴,y轴分别放大2倍;可以为负数,表示旋转;
  • skew()定义翻转的函数,根据给定的(X 轴、Y 轴)参数进行翻转,单位为角度deg,形式为skew(30px,30px);表示元素会在x轴y轴方向偏转30度;可以为负数,表示反向偏转;
  • matrix() 函数方法把所有 2D 转换方法组合在一起,移动、旋转、缩放、以及翻转元素。注意的是:没有定义perspective(透视效果),没有预计的偏转效果。

下面是所有的2D Transform方法

函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。
具体实例可从W3C网站查看,网址如下:http://www.w3school.com.cn/css3/css3_2dtransform.asp
另外还有一个问题永远值得关注,那就是浏览器的兼容性问题。新版本的浏览器似乎都对 transform 定义的2D转换进行了支持,为了防止旧版本浏览器的兼容问题(Chrome 和 Safari 需要前缀 -webkit-),需要对浏览器做兼容性处理,因为你永远不知道网站访客使用的浏览器有多老。

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 需要前缀 -ms-。

 

CSS 2D转换的更多相关文章

  1. CSS 2D 转换

    通过CSS 2D转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D转换一共五个属性:transfrom=> translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据 ...

  2. css 2D转换 transform-rotate 画插图

    学习了一点2D转换,关于Transfrom-rotate的小用法 rotate()方法,在一个给定度数顺时针旋转的元素.负值是允许的,这样是元素逆时针旋转. 下面看实例 第一个例子是没有使用rotat ...

  3. css 2D转换总结

    CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数): } 其中transform(是transform 不是transfrom)定义元素的2D或者3D转换: 2D转 ...

  4. CSS 2D转换 matrix() 详解

    2D转换 IE10.Firefox.Opera 支持 transform 属性 Chrome.Safari 需要前缀 -webkit- . IE9 需要前缀 -ms- . translate():接收 ...

  5. CSS 3学习——transform 2D转换

    首先声明一点,transform属性不为none的元素是它的定位子元素(绝对定位和固定定位)的包含块,而且对内创建一个新的层叠上下文. 注意:可以通过 transform-box 属性指定元素的那个盒 ...

  6. CSS中2d转换:transition过渡放在:hover伪类中与应用在整个元素中区别

    css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验.其中使用最多的就是hover伪类. 1.创建一个页面的div元素: <!DOCTYPE ...

  7. CSS新特性之2D转换transform

    transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x ...

  8. CSS3常用属性(边框、背景、文本效果、2D转换、3D转换、过渡、有过渡效果大图轮播、动画)

    CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"& ...

  9. css3之2D转换

    css3---2D转换 css3中出现了许多新的特性,其中2D转换我觉的非常有意思,通过她,我们能够对元素进行移动.缩放.转动.拉长或者拉伸,所以希望在这里和大家分享一下. 这里,我将会介绍到以下转换 ...

随机推荐

  1. NOIP前的模板

    1.筛\(phi\) \(logn\)求少数\(phi\) inline int phi(R int x){ R int res=x,tmp=x; for(R int i=2;i*i<=x;i+ ...

  2. 容器化VS微服务

    1 微服务 1.1 思想 开发人员自己测试.部署和运维自己编写的代码,即自己负责构建生命周期的全部. 1.2 Spring Boot 提供服务化的能力,即把容器.服务所需依赖和服务一起打包成一个jar ...

  3. 第九届蓝桥杯大赛个人赛决赛(软件类)真题Java

    更新中.......... 同一年的题解:https://www.cnblogs.com/dgwblog/p/10111903.html   01 结果填空 (满分11分) 标题:年龄问题 s夫人一向 ...

  4. IIS服务器环境下某路径下所有PHP接口无法运行报500.19错误

    IIS服务器环境下某路径(文件夹)下所有PHP接口无法运行报500.19错误 环境:IIS8.5 + php7.2.1 错误描述:某目录下(如 d:\web\A)所有php接口文档运行错误,接口测试工 ...

  5. es6-函数的扩展

    /* * 1:函数参数的默认值 * */ !(() => { function f(x, y = 1, z = 1, g = 1) { console.log(x, y, z, g);//1,1 ...

  6. Nginx unknown directive ""

    原因:由于使用记事本编辑了nginx.conf. 解决方案:参考https://www.jianshu.com/p/2516ec8bae72

  7. 实现Map按key或按value排序

    原理思路:用List实现排序,然后将List中的值遍历存入到LinkedHashMap 实现方式: //这里将map.entrySet()转换成list List<Map.Entry<St ...

  8. vue 深度响应初步了解(检测data对象数据变化)

    当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为 getter/se ...

  9. Android SurfaceFlinger

    Android 系统启动过程Activity 创建过程Activity 与 Window 与 View 之间的关系 Android 系统从按下开机键到桌面,从桌面点击 App 图标到 Activity ...

  10. Train Problem II(卡特兰数 组合数学)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1023 Train Problem II Time Limit: 2000/1000 MS (Java/ ...