您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
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产生 一些动画效果：http:/ /www.iis7.com/b/wzjk/
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 轴上任何组件。
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()。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。