<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>变形</title>
<style type="text/css">
/*基本设置*/
body{margin:0;padding:0;font-size:12px;font-family:Arial,"宋体";backgorund:#fff;}/*文档清零,字体,字号,背景设置.*/
div,ul,li,p,form,h1,h2,h3,h4,h5,input,dl,dt,dd,fieldset,table,tr,td{margin:0;padding:0;}/*边界元素清零*/
ul,li,ol{list-style:none;}/*去除列表符号*/
img{border:none;}/*去除图片按钮边框*/
a{text-decoration:none;}/*去除超链接下划线*/
img,input,textarea{vertical-align:middle;}
div {
display:inline-block;
60px;
height:60px;
background-color:#e4105e;
border:2px solid #000000;
margin:20px;
}
.div1 {
-moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-o-transform:rotate(30deg);
}
.div2 {
-moz-transform:translate(100px,-10px);
-webkit-transform:translate(100px,-10px);
-o-transform:translate(100px,-10px);
}/*Y负值向上移动，正值向下移动；X负值向左平移，正值向右平移*/
.div3 {
-moz-transform:scale(1.9,0.4);
-webkit-transform:scale(1.9,0.4);
-o-transform:scale(1.9,0.4);
}
.div4 {
-moz-transform:scale(0.3,1.8);
-webkit-transform:scale(0.3,1.8);
-o-transform:scale(0.3,1.8)
}
.div5 {
-moz-transform:scale(1.8);
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
margin-left:60px;
}
.div6 {
-moz-transform:skewX(30deg);
-webkit-transform:skewX(30deg);
-o-transform:skewX(30deg);
}
.div7 {
-moz-transform:skewY(30deg);
-webkit-transform:skewY(30deg);
-o-transform:skewY(30deg)
}
.div8 {
-moz-transform:skew(10deg,40deg);
-webkit-transform:skew(10deg,40deg);
-o-transform:skew(10deg,40deg)
}
</style>
</head>
<body>
<div>文字</div>未变形<div>文字</div><br />
<div>文字</div>旋转30度<div class="div1">文字</div><br />
<div>文字</div>位移100px,-10px<div class="div2">文字</div><br />
<div>文字</div>缩放1.9,0.5<div class="div3">文字</div><br />
<div>文字</div>缩放0.3,1.8<div class="div4">文字</div><br />
<div>文字</div>缩放1.8<div class="div5">文字</div><br />
<div>文字</div>倾斜X轴30度<div class="div6">文字</div><br />
<div>文字</div>倾斜Y轴30度<div class="div7">文字7</div><br />
<div>文字</div>倾斜X10度,倾斜Y40度<div class="div8">文字8</div><br />
</body>
</html>