日期:2014-04-23  浏览次数:21320 次

文章简介:CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件。同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素。在CSS3 2D变形中主要包含的一些基本功能如下。

在一个二维或三维空间,元素可以被扭曲、移位或旋转。只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴;而3D变形工作在X轴和Y轴之外,还有一个Z轴。这些3D变换不仅可以定义元素的长度和宽度,还有深度。我们将首先讨论元素在2D平面如何变换,然后我们在进入3D变换的讨论。

CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件。同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素。在CSS3 2D变形中主要包含的一些基本功能如下。

位移translate()函数

大家不要误会了,translate并不是指翻译外国语言,在这里translate是一种方法,将元素向指定的方向移动,类似于position中的relative。可以简单的理解为,使用translate()函数,你可以把元素从原来的位置移动,而不影响在X、Y轴上任何组件。

translate()函数的使用语法如下:

translate(tx) 

或者