关闭

css3的transform 2D 转换

标签: css3translate2D转换2D转换
516人阅读 评论(0) 收藏 举报

transform里包括

函数 描述
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 轴。

主要实验的是rotate、translate、scale、skew、matrix这五个

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
	div{
		width:200px;
		height:100px;
		background-color:#0FF;
		border:1px solid #F00;
	}

	.rotate{
		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 */
	}
		
/*	div.translate{
		transform:translate(20deg,30deg);
		-ms-transform:translate(20px,30px); 
		-moz-transform:translate(20px,30px); 
		-webkit-transform:translate(20px,30px); 
		-o-transform:translate(20px,30px) 
	}*/
/*	
	div.scale1{
		margin:100px;
		transform:scale(2,3);
		-ms-transform:scale(2,3); 
		-moz-transform:scale(2,3); 
		-webkit-transform:scale(2,3);
		-o-transform:scale(2,3);
	}*/
	
	/*
	div.skew{
		transform:skew(40deg,20deg);
		-ms-transform: skew(30deg,20deg);	
		-webkit-transform: skew(30deg,20deg);	
		-o-transform: skew(30deg,20deg);	
		-moz-transform: skew(30deg,20deg);	
	}*/
	div.matrix{
		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 */
		-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Firefox */
		-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);	/* Safari and Chrome */
		-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);		/* Opera */
	}
</style>
<title>无标题文档</title>
</head>

<body style="margin:100px;">
<!--
<div class="rotate">这个是transform:rotate();的效果</div>
-->
<br />
<!--<div>这个是第一个transform:translate</div>
<div class="translate">这个是第二个transform:translate</div>
-->
<!--
<div>这个是第一个transform:scale</div>
<div class="scale1">这个是第二个transform:scale</div>
-->
<!--
<div>这个是第一个transform:skew()</div>
<div class="skew">这个是第二个transform:skew()</div>
-->
<div>这个是第一个transform:matrix()</div>
<div class="matrix">这个是第二个transform:matrix()</div>
</body>
</html>

每个的效果图:

rotate的效果图:

translate的效果图:

scale的效果图:

skew的效果图:

matrix的效果图:




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:174433次
    • 积分:3202
    • 等级:
    • 排名:第11120名
    • 原创:141篇
    • 转载:51篇
    • 译文:1篇
    • 评论:21条
    文章分类
    最新评论