CSS3 2D转换

CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素。

一、translate()方法

translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。

代码例子:

运行效果:

translate值(50px,100px)是从左边元素移动50个像素,并从顶部移动100像素。

二,rotate()方法

rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

代码例子:

div

{

-webkit-transform: rotate(30deg); /* Safari and Chrome */

}

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

运行效果:

三,scale()方法

scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:

代码例子:

div

{

-webkit-transform: scale(2,3); /* Safari */

}

scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。

效果展示:

四,skew()方法

skew()方法,该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度:

代码例子:

div

{

-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */

}

运行效果:

skew(30deg,20deg)是绕X轴和Y轴周围20度30度的元素。

五,matrix()方法

matrix()方法和2D变换方法合并成一个。matrix方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

代码例子:

div{

-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);/* Safari and Chrome */

}

运行效果:

2D转换方法

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS3 2D转换 通过 2D 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 Internet Expl...
    safiriGitHub阅读 648评论 0 0
  • CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸 2D转换 2D 转换方法: ...
    fenerchen阅读 362评论 0 3
  • Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭...
    hzrWeber阅读 22,198评论 0 19
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,354评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,830评论 0 2