css3--变形(transform

来源：互联网发布：广电总局限制网络电视编辑：程序博客网时间：2024/06/10 07:58

<!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" />
<title>无标题文档</title>
</head>
<style>
div{
font-family:黑体;
width:100px;
align:center;
background-color:yellow;
margin-top:120px;
margin-left:100px;
}
div#a{

/*变形(transform) 旋转rotate 如果设置的值为正数表示顺时针旋转，
如果设置的值为负数，则表示逆时针旋转*/
transform:rotate(35deg);
-ms-transform:rotate(35deg); /* IE 9 */
-moz-transform:rotate(35deg); /* Firefox */
-webkit-transform:rotate(35deg); /* Safari and Chrome */
-o-transform:rotate(35deg); /* Opera */

}
/*translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）*/
#b{
transform:translate(100px,20px);
}
/* translateX(x)仅水平方向移动（X轴移动）*/
#c{
transform:translateX(200px);
}
/*translateY(Y)仅垂直方向移动（Y轴移动）*/
#d{
transform:translateY(200px);
}
/*scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放*/
#e{
transform:scale(2,2);
}
#f{
transform:scaleX(2);
}
#g{
transform:scaley(2);
}
/*skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形），*/
#h{
transform:skew(30deg,10deg);
}
#j{
transform:skewX(30deg);
}
#i{
transform:skewy(10deg);
}
#y{
-moz-transform-origin:left,top;
}

</style>

<body>
<div>这是一个div标签</div>
<div id="a">FWOEFWO LOVE KYT</div>
<div id="b">you are student stdio java php potoefpw</div>
<div id="c">wwofwe here is google,mo baidu.flsofw idslf fowfewlow</div>
<div id="d">you are student stdio java php potoefpw</div>
<div id="e">you are student stdio java php potoefpw</div>
<div id="f">you are student stdio java php potoefpw</div>
<div id="g">you are student stdio java php potoefpw</div>
<div id="h">you are student stdio java php potoefpw</div>
<div id="j">you are student stdio java php potoefpw</div>
<div id="i">you are student stdio java php potoefpw</div>
<div id="y">you are student stdio java php potoefpw</div>
</body>
</html>