美文网首页
CSS3 2D转换

CSS3 2D转换

作者: 博为峰51Code教研组 | 来源:发表于2017-05-02 22:04 被阅读0次

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转换

    CSS3 转换 通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸 2D转换 2D 转换方法: ...

  • CSS3 2D<===>3D转换

    CSS3 2D 转换 CSS3 转换CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素。 它是如何工作?...

  • CSS3 转换(1):2D

    知识点:CSS3 TransformCSS3 2D转换CSS3 3D转换CSS3 Transform与坐标系统CS...

  • CSS3中2D和3D的转换

    CSS3 转换:  CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素。 2D转换方法: transla...

  • CSS3 2D转换 、3D转换

    CSS3 2D转换 通过 2D 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 Internet Expl...

  • css动画

    css3动画 过渡:transition 2D 转换 transform 3D 转换 transform 动画:a...

  • 网络编程(六)之CSS3 2D/3D及动画

    下面仍然是跟着pink老师学习CSS3更高级的用法。 一、 CSS3 2D转换 转换(transform)是CSS...

  • css扩展/CSS3

    CSS3 边框 CSS3 圆角属性 新的背景属性 新文本属性 新转换属性 以下列出了所有的转换属性: 2D 转换方...

  • CSS3总结

    CSS3 calc() 计算属性 CSS3效果的简单事例 圆角, 圆形div 阴影2D 转换:放大、缩小、偏移、旋...

  • 学习笔记-CSS-2017.2.17

    一、CSS3 2D 转换 1、transform(rotate(deg))通过 rotate() 方法,元素顺时针...

网友评论

      本文标题:CSS3 2D转换

      本文链接:https://www.haomeiwen.com/subject/oiuhtxtx.html