特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在CSS2.1中,我们的页面都是静态的,网页设计师也习惯把它作为页面效果的设计工具。但往往有些页面效果不只是静态的,比如说,如何实际移动一些元素?如何更改元素的外观——旋转或缩放?
多年来,Web设计师为了给修改页面的外观,都依赖于图片、Flash或JavaScript才能完成。不过,CSS3将要改变设计师这种思维,进入CSS3时代,借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。
在2011年05月在站上发表了第一篇有关于CSS3 Transform教程,现已时隔近两年,有很多东西都有变化,而且理解也略有不同,接下来将会分几篇教程,向大家介绍CSS3 Transform相关的知识。
CSS3变形的介绍
2012年9月,W3C组织发布了CSS3变形工作草案。CSS3变形允许CSS把元素转变为2D 或3D空间,这个草案包括了CSS3 2D变形和CSS3 3D变形。
CSS3变形是一些效果的集合,比如平移、旋转、缩放和倾斜效果,每个效果都被称作为变形函数(Transform Function),它们可以操控元素发生旋转、缩放、和平移等变化。这些效果在之前都需要依赖图片、Flash或JavaScript才能完成。而使用纯CSS来完成这些变形则无需加载这些额外的文件,再一次提升了你的开发效率,还提高了页面的执行效率。
CSS变形允许您动态的控制元素。您可以在屏幕周围移动它们,缩小或扩大,旋转,或结合所有这些产生复杂的动画效果。通过CSS变形,可以让元素生成静态视觉效果,但也可以很容易结合CSS3的transition和动画的keyframe产生一些动画效果。在本章中,首先介绍简单的2D变形,然后向您展示如何扩展转换成3D变形。
-
CSS3的
transform
属性指一组转换函数。 -
CSS3的2D
transform
函数包括了translate()
、scale()
、rotate()
和skew()
。 -
translate()
函数接受CSS的标准度量单位;scale()
函数接受一个十进制值数值;rotate()
和skew()
两个函数都接受一个径向的度量单位值deg
。除了rotate()
函数之外,每个函数都接受X轴和Y轴的参数。 -
CSS3变形中具有
X /Y
可用的函数:translateX()
、translateY()
、scaleX()
、scaleY()
、skewX()
和skewY()
。 -
2D变形中还有一个矩阵
matrix()
函数,其包括六个参数。 -
CSS3 3D变形包括函数有:
rotateX()
、rotateY()
、rotate3d()
、translateZ()
、translate3d()
、scaleZ()
和scale3d()
。 -
CSS3 3D变形中也包括一个矩阵
matrix3d()
函数,其包括16个参数。 -
transform-origin
属性指定元素的中心点在哪。后面增加了第三个数transform-origin-z
,控制元素三维空间中心点。 -
perspective
属性相对于观众产生一个3D场景,你看3D物体,眼睛到画布的距离。正确的用法是他需要应用到变形元素的祖先元素上。 -
perspective-origin
为视点的位置。 -
backface-visibilty
属性用来设置背面的可见性。 -
设置
transform-style
的值为preserve-3d
值,建立一个3D渲染环境。
transform属性
CSS3的变形(transform)属性让元素在一个坐标系统中变形。这个属性包含一系列变形函数,可以移动、旋转和缩放元素。transform属性的基本语法如下:
transform:none | <transform-function> [<transform-function>]*
transform
属性可用于内联元素和块元素。其默认值为none
,表示不元素不进行变形。transform
另一个属性值是一系列的<transform-function>
。<transform-function>
表示一个或多个变形函数,以空格分开;换句话说就是我们同时对一个元素进行变形的多种属性操作,例如rotate
、scale
、translate
等。但这里需要提醒大家,以往我们叠加效果都是用逗号(“,”)隔开,但在transform
中使用多个transform-function
时却需要有空格隔开。
transform属性3D变形(3D transform)模块的一部分,也就是说所有的2D变形函数也包含于3D变形规范中。如此一来,CSS3变形中的函数根据不同的规范略有不同,下面列出的是变形中的2D和3D常用变形函数的功能,简单说明如下:
2D transform常用的transform-function的功能:
-
translate()
:用来移动元素,可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数:translateX()
和translateY()
。 -
scale()
:用来缩小或放大元素,可以使用元素尺寸发生变化。在此基础上有两个扩展函数:scaleX()
和scaleY()
。 -
rotate()
:用来旋转元素。 -
skew()
:用来让元素倾斜。在此基础上有两个扩展函数:skewX()
和skewY()
。 -
matrix()
:定义矩阵变形,基于X轴和Y轴坐标重新定位元素位置。
3D transform常用的transform-function的功能:
-
translate3d()
:移元素元素,用来指定一个3D变形移动位移量 -
translate()
:指定3D位移在Z轴的位移量。 -
scale3d()
:用来缩放一个元素。 -
scaleZ()
:指定Z轴的缩放向量。 -
rotate3d()
:指定元素具有一个三维旋转的角度。 -
rotateX()
、rotateY()
和rotateZ()
:让元素具有一个旋转角度。
如需转载,烦请注明出处:https://www.w3cplus.com/css3/transform-origin.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!