您的位置：首页 > Web前端 > CSS

css3的transform2D用法

2015-09-08 19:55 676 查看

今天稍微有点空余时间，看了一下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: sc
be72
ale(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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3

相关文章推荐

新的分享

章节导航