日期: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是一种方法,将元素向指定的方向移动,类似于position
中的relative
。可以简单的理解为,使用translate()
函数,你可以把元素从原来的位置移动,而不影响在X、Y轴上任何组件。
translate()函数的使用语法如下:
或者