css3的transform 2D 转换

最新推荐文章于 2024-09-02 11:19:23 发布

依然那么楞

最新推荐文章于 2024-09-02 11:19:23 发布

阅读量848

点赞数

文章标签： css3 translate 2D 转换 2D转换

本文链接：https://blog.csdn.net/ling811/article/details/17096567

版权

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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3的transform 2D 转换

transform里包括函数描述matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。translateX(n)定义 2D 转换，沿着 X 轴移动元素。translateY(n)
复制链接

扫一扫