CSS3变形的示例分析

这篇文章主要介绍了CSS3变形的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

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)。

感谢你能够认真阅读完这篇文章，希望小编分享的“CSS3变形的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!