购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS3 2D 转换

CSS3 2D 转换
通过 CSS3 转换,我们能够让某个元素改变形状,大小和位置;对元素进行移动、缩放、转动、拉长或拉伸。
编辑:前端控 前端控 更新时间:2019-02-01 10:43:27

CSS3 2D 转换

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

浏览器支持:

属性
                                                              浏览器支持
transform

        

   需要前缀 -ms-

              

   需要前缀 -webkit-

   

              

      需要前缀 -webkit-

     

2D 转换方法

  • translate()

  • rotate()

  • scale()

  • skew()

  • matrix()

translate() 方法

通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数rotate()方法

实例

div
{
	width:100px;
	height:75px;
	background-color:pink;
	border:1px solid black;
}
.demo
{       opacity: 0.5;
	transform:translate(150px,100px);
	-ms-transform:translate(150px,100px); /* IE 9 */
	-webkit-transform:translate(150px,100px); /* Safari and Chrome */
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

rotate()方法

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

实例

div
{
	width:100px;
	height:75px;
	background-color:pink;
	border:1px solid black;

}
.demo
{       opacity: 0.5;
	transform:rotate(150deg);
	-ms-transform:rotate(150deg); /* IE 9 */
	-webkit-transform:rotate(150deg); /* Safari and Chrome */
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

scale()方法

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

实例

div
{
	width:100px;
	height:75px;
	background-color:pink;
	border:1px solid black;
}
.demo

{  margin: 100px;
   opacity:0.5;
	transform:scale(1.8,1..8);
	-ms-transform:scale(1.8,1..8); /* IE 9 */
	-webkit-transform:scale(1.8,1.8); /* Safari and Chrome */
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 20.jpg

skew() 方法

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

skewX():表示只在X轴(水平方向)倾斜

skewY():表示只在Y轴(垂直方向)倾斜

实例

div
{
	width:100px;
	height:75px;
	background-color:pink;
	border:1px solid black;
}
.demo

{  margin: 100px;
   opacity:0.5;
	transform:skew(20deg,40deg);
	-ms-transform:skew(20deg,40deg); /* IE 9 */
	-webkit-transform:skew(20deg,40deg); /* Safari and Chrome */
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 22.jpg

matrix()方法

matrix()方法将2D变换方法合并成一个具有旋转,缩放,移动(平移)和倾斜功能

实例

div
{
	width:100px;
	height:75px;
	background-color:pink;
	border:1px solid black;
}
.demo

{  margin: 100px;
   opacity:0.5;
	transform:matrix(0.866,0.5,-0.5,0.866,0,0);
	-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
	-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 23.jpg



新的转换属性

Property描述CSS版本
transform适用于2D或3D转换的元素3
transform-origin允许更改转化元素位置3

2D转换方法

函数描述
matrix(n,n,n,n,n,n)定义 2D 转换,使用六个值的矩阵。
translate(x,y)定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n)定义 2D 转换,沿着 X 轴移动元素。
translateY(n)定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y)定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n)定义 2D 缩放转换,改变元素的宽度。
scaleY(n)定义 2D 缩放转换,改变元素的高度。
rotate(angle)定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle)定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle)定义 2D 倾斜转换,沿着 X 轴。
skewY(angle)定义 2D 倾斜转换,沿着 Y 轴。
网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号