CSS3中的变形处理主要是旋转，缩放，移动，倾斜。
一、旋转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3变形处理</title>
<style type="text/css">
/*旋转rotate 缩放scale 移动translate 倾斜skew */
div{
background-color: yellow;
width: 300px;
text-align: center;
margin: 150px auto;
tranform:rotate(45deg);
-webkit-transform:rotate(45deg);
}
</style>
</head>
<body>
<div>huangbaokang</div>
</body>
</html>
还有其他旋转css
transform: rotateX();
transform: rotateY();
transform: rotateZ();
transform: rotate3d();二、缩放
transform: scale(3.5);
-webkit-transform:scale(3.5);
还有其他缩放
transform: scaleX();
transform: scaleY();
transform: scaleZ();
transform: scale3d();三、倾斜
transform: skew(30deg,30deg);
-webkit-transform:skew(30deg,30deg);
相当
transform: skewX(30deg);
transform: skewY(30deg);四、移动
transform: translate(200px,300px);
-webkit-transform:translate(200px,300px);
同理，还有其他css
transform: translateX();
transform: translateY();
transform: translateZ();
transform: translate3d();这些变形css都是有基准点的，在css3中可以通过transform-orgin:top right;来控制