CSS3 2D 转换 登录

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>
提交 重置代码
章节 评论 笔记 课件
  • 取消 回复 发送
  • 取消 发布笔记 发送