[web 前端] css3 transform方法常用属性

  cp from : https://www.cnblogs.com/chrxc/p/5126569.html

 css3中transform方法是一个功能强大的属性,可以对元素进行移动、缩放、转动、拉长或拉伸等功能。

 transform中最为常用的4个属性分别是:rotate();、scale();、skew();、translate()

 1.旋转rotate()在我之前地文章中提到过,在这就不重复描述了,我要在剩下的3个方法中去详细描述

 2.缩放scale();属性,元素的尺寸会增加或者减少,根据给定的宽度(x轴)和高度(y轴)参数

      eg:scale(2,4)是把元素宽度转换为原尺寸的2倍,把高度转换为原始高度的4倍。

  注:这里换成小数就是缩小!,一个参数就是宽和高一起都增加或减少。

 3.倾斜skew();属性,把元素翻转给定角度,根据给定的水平线(x轴)和垂直线(y轴)参数。  

      eg:skew(30deg,20deg)围绕x轴把元素倾斜30度,围绕y轴把元素倾斜20度。

  注:一个参数表示水平翻转角度!

   4.元素移动translate();属性,元素从当前位置移动,根据给定的left(x坐标)和top(y坐标)的位置参数。  eg:translate(50px,100px);元素与左边距50px,与上边距100px距离(如有错误欢迎指正

posted @ 2019-02-20 16:10  demoblog  阅读(1830)  评论(0编辑  收藏  举报