首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS3变形属性

CSS3变形属性

作者头像
py3study
发布2020-01-08 17:46:44
1.9K0
发布2020-01-08 17:46:44
举报
文章被收录于专栏:python3python3

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

  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)。
  3. 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)。
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-09-03 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档