CSS3实现2D变换
CSS2D变换
transform:
rotate()选择函数(deg)
<style> div{width: 100px;height: 100px;margin: 100px auto;transition: 2s;background: #9BFF67;transform-origin: right bottom;} div:hover{transform: rotate(360deg);} </style>
</head>
<body>
<div></div>
</body>当鼠标悬停在div上，div以右下角为圆心，旋转360度。
skew(X,Y)倾斜函数(deg)
skewX()
skewY()
<style> div{width: 100px;height: 100px;margin: 100px auto;transition: 2s;background: #9BFF67;} div:hover{transform: skewY(-30deg);} </style>
</head>
<body>
<div></div>
</body> 
skewY()竖直方向上有拉伸。skewX()水平方向上有拉伸，skewX(30deg)如下所示：
scale(X,Y)缩放函数(正数、负数和小数),如果只传一个值,会在X,Y方向都缩放。
scaleX()
scaleY()
<style> .box{width: 100px;height: 100px;background: red;margin:100px auto; transition:all 2s;} .box:hover{transform: scale(2);} </style>
</head>
<body>
<div class="box"></div>
</body> 鼠标悬停在div上，盒子放大2倍。如果换成img，可以做出鼠标悬停，图片放大的效果。如果指定scaleX()或者scaleY()，那么只会在水平或竖直方向，而另一方向保持不变。
translate()位移函数(px),如果只传一个值,只会在X方向有位移。
translateX()
translateY()
transform简写执行顺序，后写先执行
通过矩阵实现各种变换。
matrix(a,b,c,d,e,f)矩阵函数(低版本IE)
默认值：matrix(1,0,0,1,0,0)
通过矩阵实现缩放
x轴缩放 a=x*a;
y轴缩放 d=y*d;
通过矩阵实现位移
x轴位移: e=e+disX
y轴位移: f=f+disY
通过矩阵实现倾斜
x轴倾斜:c=Math.tan(xDeg/180*Math.PI)
y轴倾斜: b=Math.tan(yDeg/180*Math.PI)
1、实现缩放
<style> .box{width: 100px;height: 100px; margin: 100px auto;background: red;transition:1s;} .box:hover{transform:matrix(2,0,0,2,0,0);} </style>2、实现位移
<style> .box{width: 100px;height: 100px; margin: 100px auto;background: red;transition:1s;} .box:hover{transform:matrix(1,0,0,1,100,100);} </style>3、实现倾斜
<style> .box{width: 100px;height: 100px; margin: 100px auto;background: red;transition:1s;} .box:hover{transform:matrix(1,0,0.577,1,0,0);} </style>X方向倾斜30°
也可以同时设置a,b,c,d,e,f的值实现缩放，位移和倾斜
matrix(a,b,c,d,e,f) 矩阵函数
通过矩阵实现旋转
a=Math.cos(deg/180*Math.PI);
b=Math.sin(deg/180*Math.PI);
c=-Math.sin(deg/180*Math.PI);
d=Math.cos(deg/180*Math.PI);
变换兼容IE9以下IE版本只能通过矩阵来实现
filter: progid:DXImageTransform.Microsoft.Matrix( M11= 1, M12= 0, M21= 0 , M22=1,SizingMethod=’auto expand’);
IE下的矩阵没有E和F两个参数 M11==a; M12==c; M21==b; M22==d
<style> .box{width: 100px;height: 100px; margin: 100px auto;background: red;} .box:hover{transform:matrix(0.88,0.5,-0.5,0.88,0,0); filter: progid:DXImageTransform.Microsoft.Matrix( M11= 0.88, M12= -0.5, M21= 0.5 , M22=0.88,SizingMethod='auto expand');} </style>
</head>
<body>
<div class="box"></div>
</body>
</html>
<script> console.log(Math.cos(30/180*Math.PI) + "||" + Math.sin(30/180*Math.PI)); </script>