<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<style>
.wrapper{
height:200px;
width:300px;
border:2px dotted red;
margin:100px auto;
}
.wrapper div{
height:200px;
width:300px;
line-height:200px;
text-align:center;
background:green;
color：#fff;
transform:skew(-100deg);
-webkit-transform:skew(-100deg);
-moz-tansform:skew(-100deg);
}
.wrapper span{
display:block;
background:yellow;
transform:skew(60deg);
-webkit-transform:skew(60deg);
-moz-transform:skew(60deg);
}
</style>
</head>
<body>
<div class="wrapper">
<div><span>我不想旋转</span></div>
</div>
</body>
</html>
