ITPub博客

CSS3变形

原创 Html/css 作者:as507169008 时间:2018-10-06 12:59:39 0 删除 编辑

CSS3变形

CSS2.1中的页面都是静态的,网页设计师也习惯把它作为页面效果的设计工具。多年来,Web设计师依赖于图片、Flash或 JavaScript才能完成修改页面的外观。 CSS3将改变设计师这种思维,借助CSS3可以轻松倾斜、缩放、移动以及翻转元素。

2012年9月,W3C组织发布了CSS3变形工作草案。允许CSS把元素转变为2D或3D空间,这个草案包括了CSS32D变形和CSS33D变形。CSS3变形是一些效果的集合, 比如平移、旋转、缩放和倾斜效果,每个效果都称为变形函数( Transform Function),它们可以操控元素发生旋转、缩放、平移等变化。 这些效果在之前都需要依赖图片、Flash或JavaScript才能完成。而使用纯CSS来完成这些变形无须加载这些额外的文件,再一次提升了开发效率, 提高了页面的执行效率。

CSS3变形属性及函数:

CSS3变形允许动态的控制元素,可以在屏幕周围移动它们,缩小或扩大、旋转,或结合所有这些产生复杂的动画效果。通过CSS变形,可以让元素生成静态视觉效果,也可以很容易结合CSS3的transition和动画的keyframe产生 一些动画效果:

CSS3变形中具有 X/ Y可用的函数: translateX()、translateY()、scaleX()、scaleY()、skewX()和skewY()。 

1,CSS3 2D变形函数包括: translate()、scale()、rotate()和skew()。translate()函数接受CSS的标准度量单位; scale()函数接受 一个0~1 之间的十进制值; rotate() 和 skew() 两个函数都接受 一个径向的度量单位值deg。除了rotate()函数之外,每个函数都接受X轴和Y轴的参数。 2D变形中还有一个矩阵matrix()函数, 包括6个参数。

2,CSS3 3D变形函数包括: rotateX()、rotateY()、rotate3d()、translateZ()、translate3d()、scaleZ()和scale3d()。 3D变形中也包括一个矩阵matrix3d()函数, 包括16 个参数。

CSS 变形属性详解:

transform属性指一组转换函数, transform-origin属性指定元素的中心点在哪, 新增加了第三个数transform-origin-z, 控制元素三维空间中心点。 transform-style的值设置为preserve- 3d, 建立 一个3D渲染环境。

:CSS3 2D变形 

在二维或三维空间,元素可以被扭曲、移位或旋转。只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴;而3D变形工作在X轴和Y轴之外, 还有一个Z轴,这些3D变换不仅可以定义元素的长度和宽度,还有深度。首先讨论元素在2D平面如何变换,然后在进入3D变换的讨论。CSS32D变换让Web设计师有了更多的自由来装饰和变形HTML组件,同时有更多的功能装饰文本和更多的动画选项来装饰div元素。2D位移在这里translate是一种方法,将元素向指定的方向移动, 类似于position中的relative。可以简单理解为,使用translate()函数可以把元素从原来的位置移动,而不影响在 X、 Y 轴上任何组件。http:/ /www.iis7.com/b/wzjk/

translate() 函数可以取一个值tx,也可以取两个值tx和 ty,

·tx:代表X轴( 横坐标)移动的向量长度, 当其值为正值时, 元素向X轴右方向移动, 反之其值为负值时, 元素向X轴左方向移动。 

·ty:代表Y轴( 纵坐标) 移动的向量长度,当其值为正值时, 元素向Y轴下方向移动, 反之其值为负值时, 元素向Y轴上方向移动。 如果ty没有显式设置时, 相当于ty=0。 

结合起来, translate()函数移动元素主要有以下三种移动。

-水平移动: 向右移动 translate( tx, 0) 和向左移动 translate(- tx, 0)。 

-垂直移动:向上移动 translate( 0,- ty) 和向下移动 translate( 0, ty)。 

-对角移动:右下角移动 translate( tx, ty)、右上角移动translate( tx,- ty)、 左上角移动translate(- tx,- ty) 和左下角移动translate(- tx, ty)。

如果要将对象沿着一个方向移动, 如沿着水平轴或者纵轴移动, 可以使用translate( tx, 0) 和translate( 0, ty)来实现。 其实在变形中还为单独一个方向移动对象提供了更简单的方法。 

·translateX():水平方向移动一个对象。通过给定一个X轴方向的数值指定对象沿水平轴方向的位移。简单点说,对象只向X轴进行移动,如果值为正值, 对象向右移动;如果值为负值,对象向左移动。 

·translateY():纵轴方向移动一个对象。通过给定一个Y轴方向的数值指定对象沿纵轴方向的位移。 简单点说,对象只向Y轴进行移动,如果值为正值,对象向下移动;如果值为负值,对象向上移动。这两个函数和前面介绍的translate()函数不同的是每个方法只接受一个值。 

·transform: translate(- 100px, 0) 实际上 等于 transform: translateX(- 100px)。 

·transform: translate( 0,- 100px) 实际上 等于 transform: translateY(- 100px)。

2D缩放

缩放函数scale()让元素根据中心原点对对象进行缩放, 默认值为 1。因此0. 01到 0. 99之间的任何值,使一个元素缩小;而任何大于或等于 1. 01的值, 让元素显得更大。

缩放scale()函数和translate()函数的语法非常相似,可以接受一个值,也可以接受两个值,只有一个值时,其第二个值默认与第一个值相等。

其取值简单说明如下:

·sx:指定横向坐标( X 轴)方向的缩放向量, 如果值为0. 01 ~ 0. 99之间, 会让对象在X 轴方向缩小, 如果值大于或等于1. 01, 对象在X 轴方向放大。 

·sy:指定纵向坐标( Y 轴)方向的缩放量, 如果值为 0. 01 ~ 0. 99 之间, 会让对象在Y轴方向缩小, 如果值大于或等于1. 01, 对象在Y 轴方向放大。

·scaleX():相当于scale( sx, 1)。表示元素只在X轴( 水平 方向)缩放元素, 默认值是1。 

·scaleY():相当于scale( 1, sy)。表示元素只在Y轴( 纵横 方向)缩放元素, 默认值是1。

2D旋转 

旋转函数rotate()通过指定的角度参数对元素根据对象原点指定 一个2D旋转。主要在二维空间内进行操作,接受一个角度值,用来指定旋转的幅度。 如果这个值为正值,元素相对原点中心顺时针 旋转;如果这个值为负值,元素相对原点中心逆时针旋转。

rotate()函数只接受一个值a,代表旋转的角度值。其取值可以是正的,也可以是负的。 

·取值为正值时,元素默认相对元素中心点顺时针旋转。 

·取值为负值时,元素默认相对元素中心点逆时针旋转。

2D倾斜 

倾斜函数skew()能够让元素倾斜显示,可以将一个对象以其中心位置围绕着X轴和Y轴 按照一定的角度倾斜。与rotate()函数的旋转不同,rotate()函数只是旋转, 而不会改变元素的形状。skew() 函数不会旋转,而只会改变元素的形状。

·ax:指定元素水平方向( X 轴 方向)倾斜的角度。 

·ay:指定元素垂直方向( Y 轴 方向)倾斜的角度。

skew()函数和CSS3变形中的 translate()、scale()函数一样,除了可以使用 skew( tx, ty)函数让元素相于元素中心为原点在X轴和Y轴倾斜之外,还可以使用使用 skewX()和skewY()函数让元素只在 水平或垂直方向倾斜。 

·skewX():相当于skew( ax, 0) 和 skew( ax)。按给定的角度沿X轴指定一个倾斜变形。 skewX()使元素以其中心为基点, 并在水平方向( X 轴)进行倾斜变形。 

·skewY():相当于skew( 0, ay)。按给定的角度沿Y轴指定一个倾斜变形。 skewY()用来设置元素以其中心为基点并按给定的角度在垂直方向( Y 轴) 倾斜变形。

在默认情况下,skew()函数都是以元素的原中心点对元素进行倾斜变形,但是同样可以根据 transform- origin 属性, 重新设置元素基点对元素进行倾斜变形。另外,skew()函数和制图软件中的变形 工具所起作用类似,

2D矩阵

CSS3中Transform让操作变形变得很简单,如位移函数translate() 缩放函数scale()、旋转函数rotate() 和倾斜函数skew()。 这几个函数很简单, 也很方便, 但是变形中的矩阵函数matrix()不常用。当然,Web设计师可以使用rotate()、skew()、scale()和translate()函数来满足它们的变形需要,那为什么要使用矩阵matrix() 呢? 在CSS3中的变形函数都可以使用matrix()函数来代替。

:CSS3 3D变形 

使用二维变形能够改变元素在水平和垂直轴线,然而还有一个轴沿着它,可以改变元素。使用三维变形,可以改变元素在Z 轴位置。 三维变换使用基于二维变换的相同属性,如果熟悉二维变换会发现,3D变形的功能和2D变换的功能类似。CSS3中的3D变换主要包括以下几种功能函数: 

·3D 位移: 包括translateZ()和translate3d()两个功能函数。 

·3D 旋转: 包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数。 

·3D 缩放: 包括scaleZ()和scale3d()两个功能函数。 

·3D 矩阵: 和2D变形一样,也有一个3D矩阵功能函数matrix3d()。

CSS3中3D 位移 

主要包括两种函数 translateZ() 和 translate3d()。 

1. translate3d()函数的语法translate3d()函数使一个元素在三维空间移动。这种变形的特点是,使用三维向量的坐标定义元素在每个方向移动多少。

translate3d( tx, ty, tz)

其属性值取值说明如下: 

·tx:代表横向坐标位移向量的长度; 

·ty:代表纵向坐标位移向量的长度; 

·tz:代表Z轴位移向量的长度。此值不能是一个百分比值,如果取值为百分比值,将会认为无效值。

2. translateZ()函数,功能是让元素在3D空间沿Z轴进行位移,

translate(t)

取值t指的是Z轴的向量位移长度。使用translateZ()函数可以让元素在Z轴进行位移,当其值为负值时,元素在Z轴越移越远,导致元素变得较小。反之,当其值为正值时,元素在Z轴越移越近, 导致元素变得较大。

translateZ() 函数在实际使用中等同于translate3d( 0, 0, tz)。仅从视觉效果上看, translateZ() 和 translate3d( 0, 0, tz) 函数功能非常类似于二维空间的 scale() 缩放函数,但实际上完全不同。translateZ()和translate3d(0,0,tz)变形是发生在Z轴上,而不是X轴和Y轴。当使用3D变形,能够在Z轴上移动一个元素确实有很大的好处, 比如说在创建一个3D立方体的盒子之时。

CSS3中3D 缩放

scaleZ() 和 scale3d() 函数单独使用时没有任何效果,需要配合其他的变形函数一起使用才会有效果。

CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数,当scale3d()中X轴和Y轴同时为1,即scale3d( 1, 1, sz),其效果等同于scaleZ( sz)。

1. scaleZ()3D缩放函数,可以让元素在Z轴上按比例缩放。默认值为1,当值大于1 时,元素放大,小于1大于0. 01时,元素缩小。

scale3d( sx, sy, sz) 

sx: 横向缩放比例

sy: 纵向缩放比例 

sz: Z轴缩放比例。

CSS3中 3D 旋转

在三维变形中,可以让元素在任何轴旋转。为此,CSS3新增三个旋转函数 rotateX()、rotateY() 和rotateZ()。

在 三维空间 里,使用rotateX()、rotateY() 和rotateZ()函数让一个元素围绕X、 Y、 Z 轴旋转, 其基本语法如下: 

rotateX( a) 

rotateY( a) 

rotateZ( a) 

其中a指的是一个旋转角度值,其值可以是正值也可以是负值。如果值为正值,元素顺时针旋转; 反之,值为负,元素围绕逆时针旋转。

rotateZ()函数指定元素围绕Z轴旋转,如果仅从视觉角度上看,rotateZ()函数让元素顺时针或逆时针旋转,并且效果和rotate()效果等同,但不是在2D平面 旋转。在三维空间里,除了rotateX()、rotateY()和rotateZ()函数可以让一个元素在三维空间中旋转之外,还有一个属性函数rotate3d()。在3D空间,旋转有三个 角度来描述一个转动轴。 轴的旋转是由一个[ x, y, z] 向量并经过元素原点。 其基本语法如下: 

rotate3d( x, y, z, a) rotate3d() 中取值说明。 

·x: 0 ~ 1 的数值, 用来描述元素围绕X轴旋转的矢量值。 

·y: 0 ~ 1 的数值, 用来描述元素围绕Y轴旋转的矢量值。 

·z: 0 ~ 1 的数值, 用来描述元素围绕Z轴旋转的矢量值。 

·a: 角度值, 用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转, 反之元素逆时针旋转。 当 x、y、z 三个值同时为0时, 元素在3D空间 不做任何旋转。当x、y、z 取不同值时, 和前面介绍的三个旋转函数功能等同。 

·rotateX(a) 函数功能等同于 rotate3d(1, 0, 0, a)。 

·rotateY(a) 函数功能等同于 rotate3d(0, 1, 0, a)。 

·rotateZ(a) 函数功能等同于 rotate3d(0, 0, 1, a)。


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/31552074/viewspace-2215480/,如需转载,请注明出处,否则将追究法律责任。

上一篇: CSS3颜色渐变
下一篇: CSS3 过渡
请登录后发表评论 登录
全部评论

注册时间:2018-09-14

  • 博文量
    63
  • 访问量
    19478