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的效果图: