CSS3 2D转换

时间: 2018-11-27阅读: 1970标签: 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中 出现height为100%失效的原因及解决方案

我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用。这是由于:%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。

如何写出一套可维护的CSS库?

如何写出一套可维护的CSS库?不妨谈谈CSS的设计模式/架构吧。接下来将为你讲述三个主流的CSS设计思想和一个最近通用的CSS设计思想:OOCSS、SMACSS、BEMCSS、METACSS。

css自动省略号...,通过css实现单行、多行文本溢出显示省略号

网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示。

20个常用的CSS知识点

如何隐藏滚动条,修改滚动条样式,修改input框placeholder的颜色,按钮不可点击的样式,CSS鼠标指针事件:阻止任何JS事件,文字超出强制n行 超出部分用省略号代替,修改字体间距

六种组织CSS的方式

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

CSS基础一定要看的包含块(containing block)

一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下,包含块就是这个元素最近的祖先块元素的内容区,但也不是总是这样。在本文中,我们来过一遍确定包含块的所有因素。

css数值(百分比|负值)

今天为什么要给大家讲解这个东西呢,因为css这部分,尤其是数值这部分感觉非常简单,但是尤其是简单的,却很多人根本就没有弄懂。所以今天就来讲一下css的数值问题吧。大家还是好好听一下吧。

20条书写CSS代码

在这篇文章中,我想跟你分享 20 条由 CSS 社区推荐的约定和最佳实践。 有些建议可能比较适合新手,而有些则更高级一些,但我希望每个人都可以在本篇文章中收获自己不知道的知识。

Javascript可以控制css吗?

JavaScript可以直接控制css。JavaScript中可以直接设置style的属性、改变class、设置cssText、创建引入新的css样式文件等方法来控制css样式。

为什么 CSS 这么难?

我同 CSS 打交道已经有几年了,每当需要就会用到它。最近我想明白了一个问题,那就是为什么做好 CSS 样式如此之难。如果你一直都在 CSS 中苦苦挣扎,你要知道自己并不是一个人。本文就是要告诉你为什么 CSS 这么难

点击更多...

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