Css3技术中的translate办法

2019-09-11 郑州网站建设  

通过 translate() 办法,元素从其当前位置移动,根据给定的 leftx 坐标) 和 topy 坐标) 位置参数:

translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

rotate() 办法

通过 rotate() 办法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

rotate(30deg) 把元素顺时针旋转 30 度。

scale() 办法

通过 scale() 办法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:

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

skew() 办法

通过 skew() 办法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:

skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。

matrix() 办法

matrix() 办法把所有 2D 转换办法组合在一起。

matrix() 办法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

新的转换属性

下面的表格列出了所有的转换属性:

transform 向元素应用 2D 3D 转换。

transform-origin   允许你改变被转换元素的位置。

2D Transform 办法

matrix(n,n,n,n,n,n)   定义 2D 转换,使用六个值的矩阵。

translate(x,y)  定义 2D 转换,沿着 X Y 轴移动元素。

translateX(n)   定义 2D 转换,沿着 X 轴移动元素。

translateY(n)   定义 2D 转换,沿着 Y 轴移动元素。

scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。

scaleX(n) 定义 2D 缩放转换,改变元素的宽度。

scaleY(n) 定义 2D 缩放转换,改变元素的高度。

rotate(angle)   定义 2D 旋转,在参数中规定角度。

skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X Y 轴。

skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。

skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1972.html转载请标明出处,谢谢合作!
标签:
  • (
  • )
  • 通过
  • 方法
  • CSS3
  • е
  • translate