CSS3 2D 转换

CSS3 2D 转换

CSS3 转换

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

它是如何工作?

变换的效果,让某个元素改变形状,大小和位置。

您可以转换您使用2D或3D元素。

2D 转换

在本章您将了解2D变换方法:

translate()

rotate()

scale()

skew()

matrix()

translate() 方法

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

transform: translate(50px,100px);

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

rotate() 方法

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

transform: rotate(30deg);

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

scale() 方法

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

transform: scale(2,4);

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

skew() 方法

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

transform: skew(30deg,20deg);

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

matrix() 方法

matrix()方法和2D变换方法合并成一个。

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。


继续学习
||
<!DOCTYPE html> <html> <head> <style> div { margin:30px; width:200px; height:100px; background-color:#00ff00; /* Rotate div */ transform:rotate(9deg); -ms-transform:rotate(9deg); /* Internet Explorer */ -moz-transform:rotate(9deg); /* Firefox */ -webkit-transform:rotate(9deg); /* Safari 和 Chrome */ -o-transform:rotate(9deg); /* Opera */ } </style> </head> <body> <div>Hello World</div> </body> </html>
提交重置代码
  • 推荐课程
  • 评论
  • 问答
  • 笔记
  • 课件下载
扔个三星炸死你

扔个三星炸死你

2D应该没有3D效果好。。

4年前    添加回复 0

回复
我喜欢晴天

我喜欢晴天

颜色照片用这个可以

4年前    添加回复 0

回复
我又来了

我又来了

每次用的话好像用不好,修行不到家啊

4年前    添加回复 0

回复
末日的春天

末日的春天

展示旋转的效果?

4年前    添加回复 0

回复
素颜

素颜

有点不明白2D转换了

4年前    添加回复 0

回复
男神

男神

transform: translate(50px,100px);

4年前 0

课件暂不提供下载,工作人员正在整理中,后期请多关注该课程~