8-5 CSS3中的变形--矩阵 matrix()
本节编程练习不计算学习进度，请电脑登录imooc.com操作

CSS3中的变形--矩阵 matrix()

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属性值，如果需要深入了解，需要对数学矩阵有一定的知识。

示例演示：通过matrix()函数来模拟transform中translate()位移的效果。
HTML代码：

<div class="wrapper">
  <div></div>
</div>

CSS代码：

.wrapper {
  width: 300px;
  height: 200px;
  border: 2px dotted red;
  margin: 40px auto;
}
.wrapper div {
  width:300px;
  height: 200px;
  background: orange;
  -webkit-transform: matrix(1,0,0,1,50,50);
  -moz-transform:matrix(1,0,0,1,50,50);
  transform: matrix(1,0,0,1,50,50);
}

演示结果：

任务

在CSS编辑器第12-13行输入正确代码，通过matrix()函数实现translate(100px,100px)的效果

index.htmlstyle.css 
  1. <!DOCTYPE html>
  2. <html>
  3. <head> 
  4. <meta charset="utf-8">
  5. <title>变形与动画</title>
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. </head> 
  8. <body>
  9. <div class="wrapper">
  10.   <div></div>
  11. </div>
  12. </body>
  13. </html>
  1. .wrapper {
  2.   width: 300px;
  3.   height: 200px;
  4.   border: 2px dotted red;
  5.   margin: 40px auto;
  6. }
  7.  
  8. .wrapper div {
  9.   width:300px;
  10.   height: 200px;
  11.   background: orange;
  12.   -webkit-transform: ？(1,0,0,1,100,100);
  13.   transform: ？(1,0,0,1,100,100);
  14. }
下一节