这篇文章主要介绍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开发的内容,感兴趣的小伙伴可以关注以下。