CSS3矩阵变换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width:100px;height: 100px;
background: red;
transition: 1s;
}
#div1:hover{
/*-webkit-transform: matrix(0.5,0.38,-0.38,2,0,0);*/
}
/*matrix(0.5,0.38,-0.38,2,0,0);
默认六个参数matrix(1,0,0,1,0,0);
在ie下：progid:DXImageTransform.Microsoft.Matrix(M11=1,M12=0,
M21=0,M22=1,SizingMethodd='auto expend')
* matrix(a,b,c,d,0,0);
* 在ie下六个参数：M11=a;M12=c;m21=b,M22=d*/
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
window.onload=function(){
var obox=document.getElementById("div1");
obox.onclick=function(){
//matrix(a,b,c,d,x轴的位移px,y轴的位移px)
//obox.style.webkitTransform="matrix(1,0,0,1,20,20)"
// matrix(A:x轴的缩放0-1默认为1,
// B:y轴的斜切度数的正切c=Math.tan(xdeg/180*Math.PI),
// C:x轴的斜切度数的正切d=Math.tan(xdeg/180*Math.PI),
// D:y轴的缩放默认为1,
// E:x轴的位移px默认为0,
// F:y轴的位移px默认为0)
//obox.style.webkitTransform="matrix(0.3,0,0,0.3,20,20)"
//obox.style.webkitTransform="matrix(0.3,0.3,0,0.3,20,20)"
//如果要利用矩阵进行旋转，则同时改变四个参数，
// a:Math.cos(x/180*Math.PI);
// b:Math.sin(x/180*Math.PI);
// c:-Math.sin(x/180*Math.PI);c=-b;
// d:Math.cos(x/180*Math.PI);d=a;
obox.style.webkitTransform="matrix(0.87,0.5,-0.5,0.87,20,20)"
}
}
</script>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2015-07-25，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 交互设计前端开发与后端程序设计 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读