CSS3 2D 转换

原创 2018年04月17日 18:06:50

1.版本兼容性问题:

Internet Explorer 10, Firefox, 和 Opera支持transform 属性.

Chrome 和 Safari 要求前缀 -webkit- 版本.

注意: Internet Explorer 9 要求前缀 -ms- 版本.


2. 2D变换方法

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()


3. 实例

实例

div{transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */}

尝试一下 »


translate() 方法

Translate


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

OperaSafariChromeFirefoxInternet Explorer

实例

div{transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */}

尝试一下 »

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


rotate() 方法

Rotate

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

OperaSafariChromeFirefoxInternet Explorer

实例

div{transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */}

尝试一下 »

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


scale() 方法

Scale

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

OperaSafariChromeFirefoxInternet Explorer

实例

-ms-transform:scale(2,3); /* IE 9 */-webkit-transform: scale(2,3); /* Safari */transform: scale(2,3); /* 标准语法 */

尝试一下 »

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


skew() 方法

语法

transform:skew(<angle> [,<angle>]);

包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。

  • skewX(<angle>);表示只在X轴(水平方向)倾斜。
  • skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
OperaSafariChromeFirefoxInternet Explorer

实例

div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */}

尝试一下 »

skew(30deg,20deg) 元素在X轴和Y轴上倾斜20度30度。


4. transition: 属性值 时间 速度 延迟时间;

CSS3 2D转换&3D转换

1、transform属性方法 Transform 方法 2、2D转换 translate()方法 .div1 { width: 10...
  • zhaobw831
  • zhaobw831
  • 2016-01-17 19:56:08
  • 2590

CSS3特效:2D转换&小案例

一、2D转换之移动 1.transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 2. translate(x,y)        //定义2D转换 ...
  • luohuaxinyue
  • luohuaxinyue
  • 2015-12-28 20:30:14
  • 1161

CSS3 2 2D 3D转换

CSS3 2 2D 3D转换   通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。 转换是使元素改变形状、尺寸和位置的一种效果,使用 2D 或 3D 转换来转换元素。   1浏...
  • wulinbanxia
  • wulinbanxia
  • 2017-06-22 00:12:08
  • 301

CSS3第二日--2D转换

CSS3提供了2D转换功能,能够对元素进行移动、缩放和转动等功能。 2D转换的属性名为transform,使用方法为transform:method(value)。 2D转换方法有translat...
  • ljl890705
  • ljl890705
  • 2016-01-06 16:57:25
  • 651

CSS3变形之2D变形

CSS3变形之2D变形
  • xu_ya_fei
  • xu_ya_fei
  • 2016-06-15 18:51:24
  • 2067

CSS3 之2D变换(旋转,缩放,位移,矩阵函数)

CSS3 之2D变换   l transform •     rotate()  旋转函数 取值度数 –    deg  度数 –    Transform-origin旋转的基点 •     ske...
  • u013267266
  • u013267266
  • 2016-05-02 16:44:39
  • 1793

css3 2D--transform--scale缩放

再来说说css3 2Dtransform之scale,    该属性理解也很简单,可以让元素在水平和垂直方向进行缩放,请注意缩放这个词语,说明它是既可以将元素方法,也可以将元素缩小的。该属性的用法如...
  • qq545698514
  • qq545698514
  • 2016-12-13 09:32:26
  • 207

transform属性——css3变形效果2D

一、transform           该属性允许我们对元素进行移动、缩放、旋转或倾斜 transform的属性值如下所示: 1、none                    无变换 2、tr...
  • MOONCOM
  • MOONCOM
  • 2017-01-15 20:58:40
  • 871

CSS3实现2D变换

CSS2D变换 transform: rotate()选择函数(deg) div{width: 100px;height: 100px;margin: 100px au...
  • liuyan19891230
  • liuyan19891230
  • 2016-04-23 15:21:06
  • 3938

css3 动画之 2D旋转 3D旋转 放大

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和...
  • viciousDear
  • viciousDear
  • 2015-05-30 20:14:41
  • 2007
收藏助手
不良信息举报
您举报文章:CSS3 2D 转换
举报原因:
原因补充:

(最多只允许输入30个字)