css变形 平移函数,平移与变形_css教程_css基础_课课家

这篇文章主要介绍css3新增的transform属性。多年来，web设计师为了给修改页面的外观，都依赖于图片、flash或javaScript才能完成。在css3中，可以用transfform属性功能就可以实现旋转、缩放、倾斜以及移动四种文字以及图像的变形处理。

(一)元素平移

有许多方法可以使元素在页面显示当中产生位移，能用块状元素合模型，也能用相对以及绝对坐标，现在给大家介绍css提供的两个元素移动属性，即“vertical-align”以及“transform”；transform是css3标准提供的新属性。

(1)内联元素垂直平移

内联元素的平移遵循以下法则：

默认下，元素移动，负值往下，正值往上；要是默认基线在上面，要用负数；要是默认基线在下面，就用正值；

如下例：

显示效果：

(2)块状元素平移

全部内联元素都能用display属性换成块状元素，然后用平移方法，transform属性是css3的新属性，如下例：

显示效果：

(二)元素变形

(1)等比例缩放

等比例缩放可以使元素等比扩大或者缩小为设定的倍数，语法为：transform:scale(n);

其中，n默认是1，元素保持正常大小的显示，超过1就是等比扩大，此时，长宽同时扩大，小于1就等比缩小；

此外，与translate相同，scale同时能单独设置某一条边的缩放，scalen单独扩大或者缩小元素宽度，scalen单独扩大或者缩小元素高度。

显示效果：

(2)旋转

块状元素的旋转能通过transform的rotate值进行实现，如下例：

显示效果：

默认下，元素旋转的基准点是块状元素的中心点，能够设置“transform-origin”属性改变旋转的基准点位置，如下例：

显示效果：

(3)倾斜

显示效果：

以上旋转，缩放以及倾斜可以都写在transform当中，如下例：

显示效果：

(4)3D平移

3D平移，语法为：transform:translate3d(x,y,z);

x,y参数是2d中translate的参数效果一样，3d中多了z轴，而且跟数学模型中的x,y,z轴相同，z轴垂直与电脑屏幕以及垂直xy轴，z设置为正值，默认下图形沿着z轴靠近观测者还逐渐放大，就是说图形距观测者更近，设置成负数就相反。

总结：transform是css3新增的属性，能实现内容平移与变形了。在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。我们网站：课课家教育会给大家介绍更多关于Web开发的内容，感兴趣的小伙伴可以关注以下。