今天稍微有点空余时间,看了一下css3中transform2D的用法,还挺简单实用。
1.基本的用法
transform: translate(20px, 20px);
transform: rotate(30deg);transform-origin:0 0;
transform: rotate(30deg);transform-origin:100% 100%;默认情况下是50% 50%。
transform: scale(4,2);
通过 skew(30deg,20deg)方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:
2.难点:matrix矩阵
首先需要先回忆一下矩阵论里面矩阵相乘的知识,其次了解一下投影矩阵的概念。
上面的公式计算后:ax+cy+e为变换后的水平坐标,bx+dy+f表示变换后的垂直位置。
相信如果对矩阵论还有印象,应该会记得二维矩阵[1 0 0 1]实际上就是一个单位矩阵,任何二维矩阵乘以它就等于矩阵本身。了解了这个知识点,下面我们研究一下这个矩阵。
(1)translate
所以,如果有这么个矩阵,transform: matrix(1, 0, 0, 1, 10, 10); /* a=1, b=0, c=0, d=1, e=30, f=30 */
那么,变换后的x坐标就是ax+cy+e = 1*0+0*0+10 =10, y坐标就是bx+dy+f = 0*0+1*0+10 =10. 于是,中心点坐标从(0, 0)变成了→(10, 10)。相当于div往右下方同时偏移了10像素!
实际上transform: matrix(1, 0, 0, 1, 10, 10);就等同于transform: translate(10px, 10px);
(2)缩放(scale)
上面的偏移是matrix效果中最简单,最容易理解的。下面,为了进一步加深对matrix的理解,会简单讲下matrix矩阵与缩放,旋转以及拉伸效果。
再回忆一下矩阵论,有没有想起来有个特殊的矩阵叫斜对角矩阵[m,0,0,m].
于是带到上面的公式里面,x’ = ax+cy+e = m*x+0*y+0 = m*x;y’ = bx+dy+f = 0*x+m*y+0 = m*y;
很明显matrix(mx, 0, 0, my, 0, 0),相当于scale(mx, my);
(3)旋转(rotate)
方法以及参数使用如下(假设角度为θ):matrix(cosθ,sinθ,-sinθ,cosθ,0,0)结合矩阵公式,就有:
x’ = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ
y’ = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ
所以matrix(cosθ,sinθ,-sinθ,cosθ,0,0)相当于rotate(θdeg),这边还是rotate(θdeg)比较简单。
(4)拉伸(skew)
拉伸也用到了三角函数,不过是tanθ,而且,其只和b, c两个参数相关:matrix(1,tan(θy),tan(θx),1,0,0)
套用矩阵公式计算结果为:
x’ = x+y*tan(θx)+0 = x+y*tan(θx)
y’ = x*tan(θy)+y+0 = x*tan(θy)+y
对应于skew(θx + “deg”,θy+ “deg”)这种写法。 其中,θx表示x轴倾斜的角度,θy表示y轴,两者并无关联。
所以,利用matrix我们就可以实现自己想要的transform效果。
下面贴点代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transform2D</title>
<style type = "text/css">
div {
width: 120px;
height: 120px;
background-color: #229988;
word-wrap: break-word;
}
.my-translate {
transition: transform 2s;
transform: translate(20px, 20px);
-ms-transform: translate(20px, 20px); /* IE 9 */
-webkit-transform: translate(20px, 20px); /* Safari and Chrome */
-o-transform: translate(20px, 20px); /* Opera */
-moz-transform: translate(20px, 20px); /* Firefox */
}
.my-rotate1 {
transition: transform 2s;
margin-top: 20px;
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
transform-origin:0 0;
}
.my-rotate2 {
transition: transform 2s;
margin-top: 20px;
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
transform-origin:100% 100%;
}
.scale {
transition: transform 2s;
transform: scale(2,0.5);
-ms-transform: scale(2,0.5); /* IE 9 */
-webkit-transform: scale(2,0.5); /* Safari 和 Chrome */
-o-transform: scale(2,0.5); /* Opera */
-moz-transform: scale(2,0.5); /* Firefox */
}
.skew {
transition: transform 2s;
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}
</style>
</head>
<body>
<h1>transform2D</h1>
<h2>1.基本的用法</h2>
<div id = "mydiv1"> translate()最初的div</div>
<button id="translate">translate(20px,20px)</button>
<div id = "mydiv2"> rotate(30deg),旋转点为0,0</div>
<button id="rotate1">rotate(30deg)</button>
<div id = "mydiv3"> rotate(30deg),旋转点为100%,100%</div>
<button id="rotate2">rotate(30deg)</button>
<div id = "mydiv4"> transform: scale(4,2);</div>
<button id="scale">scale(4,2);</button>
<div id = "mydiv5"> transform: skew(30deg,20deg);</div>
<button id="skew">skew(30deg,20deg)</button>
<script>
function animate(btnName, divName,animateName){
var btn = document.getElementById(btnName);
var div = document.getElementById(divName);
btn.addEventListener("click", function(event){
div.className = animateName;
event.stopPropagation();
},false);
}
animate("translate", "mydiv1", "my-translate");
animate("rotate1", "mydiv2", "my-rotate1");
animate("rotate2", "mydiv3", "my-rotate2");
animate("scale", "mydiv4", "scale");
animate("skew", "mydiv5", "skew");
</script>
</body>
</html>