CSS3 2D转换

时间: 2018-11-27阅读: 2113标签: css

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

首先,css3中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-。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1430

css实用小技巧_css常用技巧和经验总汇

这篇文章整理了一些css常用技巧和经验总汇,包括:如何清除图片下方出现几像素的空白间隙?如何让文本垂直对齐文本输入框?如何让单行文本在容器内垂直居中?为什么Standard mode下IE无法设置滚动条的颜色?

CSS开发中的10个不要

自我进入这个行业,我就发现开发人员一直在努力征服CSS。理由也很充分,开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行,而另一个DIV“浮”到左侧,感觉没有任何意义。

关于CSS自文档的思考_css声明式语言式代码注释

当涉及到声明式的语言如CSS时,就发现了一些有趣的地方。声明式语言式必须符合对应格式的,而CSS选择器基本是由HTML结构决定的。对这种代码结构,我们能做的不多,这是否意味着CSS代码必须注释满天飞?

CSS运算 calc()是怎么实现计算

CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。

CSS中可以和不可以继承的属性

这篇文章整理css中无继承性的属性、继承性的属性、所有元素可以继承的属性、内联元素可以继承的属性、块级元素可以继承的属性

六种组织CSS的方式

Ben Frain曾经说过,写css代码很容易,但是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。OOCSS 意为面向对象的CSS。这种方法有两种主要 观点:结构与设计分离,容器和内容分离

精简CSS代码,提高代码的可读性和加载速度

定义简洁的CSS规则:CSS的每条规则中都包含了规则的属性及属性值。定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值。

Js如何动态修改css样式

使用obj.className来修改样式表的类名,使用obj.style.cssTest来修改嵌入式的css,使用obj.className来修改样式表的类名,使用更改外联的css文件,从而改变元素的css

能用HTML/CSS解决的问题就不要使用JS

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。

CSS 解析原理_你知道浏览器CSS是如何解析吗?

作为前端,我们每天都在与CSS打交道,那么CSS的原理是什么呢? 浏览器渲染过程分为了两条主线:其一,HTML Parser 生成的 DOM 树;其二,CSS Parser 生成的 Style Rules ;

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!