-moz-transform:skew(30deg,-20deg); /* Firefox */
-webkit-transform:skew(30deg,-20deg); /* Safari 和 Chrome */
-o-transform:skew(30deg,-20deg); /* Opera */
transform-origin:100% 100%; /* W3C标准 */
-ms-transform-origin:100% 100%; /* IE 9 */
-moz-transform-origin:100% 100%; /* Firefox */
-webkit-transform-origin:100% 100%; /* Safari 和 Chrome */
-o-transform-origin:100% 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">
<div>translate(基点为(left top)</div>
</div>
<div id="div2">
<div>rotate(基点为(0%, 0%)</div>
</div>
<div id="div3">
<div>scale(基点为(center, top)</div>
</div>
<div id="div4">
<div>skew(基点为(100%, 100%)</div>
</div>
</div>
</body>
</html>
效果如下:

对比发现:translate()方法与之前的没有区别,其他三个方法基点改变了,图形变形效果也有所变化。
3D transform变换方法










