transform

transform格式：


transform：transform-functions；

我们一般是通过transform属性进行变形，可以旋转，缩放，平移，倾斜等。

我们学之前先做一个小例子，将一个小div旋转5度。（盒子阴影，渐变，旋转）

<style>
    .lzr{
      width: 200px;
      height: 200px;
      /* background: -webkit-linear-gradient(left bottom,brown,gray);
      background: -moz-linear-gradient(red top,brown,gray);
      background: -o-linear-gradient(right top,brown,gray);
      background: linear-gradient(to right top,brown,gray); */
      background:radial-gradient(brown,gray,blue);
      transform:rotate(5deg);
      box-shadow: 2px 2px 2px 1px #aa0000;
    }
  </style>

我们看一下运行结果：

transform属性详细讲解_2d

现在我们全面剖析一下这个属性。

这个和前面写的过渡，渐变一样是不被主流浏览器支持的，所以在实际开发中是需要加前缀的，我们再写一下主流浏览器前缀：

火狐：-moz-

IE：-ms-

Opera：-o-

谷歌：-webkit-

前面我也说了，这个属性是改变图形形状的，可以旋转，缩放，或者平移倾斜等。我们依次讲解：

旋转呢用到rotate，后面要加上deg，rotate（angle）这个是用来定义2d旋转的，我们在学习数学时，二维是x，y。三维就是x，y，z。这里也一样，3D旋转这样表示：rotate3d（x，y，z，angle）。

缩放用scale，也分为2d缩放和3d缩放等，scale（x，y）表示2d缩放，这是我们要注意一个问题，这是我们让他们在某个轴上进行缩放我们可以在scale后面加x或者y。我们如果在y轴上缩放，我们会表达为scaleY，如果放大倍数都是一样的，我们可以将y省略，这样scale（x，y）表示。scale（x，y，z）用来定义3d缩放。

我们举个例子，如果我们想让它沿着x轴放大2倍，我们可以这样写：


transform：scaleX（2）；

translate用来定义平移，这个后面跟像素px。translate（x，y）用来定义2d转换这里面和前面讲的缩放差不多。translate3d用于同时设置translateX，translateY和translateZ这3个参数。并且这3个参数不能少。我们也写个小例子方便消化：

我们让这个矩形向下平移50px。


transform：translateY(50px);

我们这里需要注意几个点：


  2. translate作为平移，我们x轴平移的时候，向右平移写正数，向左平移写负数。
  3. translate（50px，50px）这样表达就是同时设置了translateX和translateY的值。第二个参数如果不写的话，浏览器默认为0。但是3d的必须3个参数的值都要有，不然会报错的。

倾斜用skew表示，后面要跟上deg。

skew（x-angle，y-angle）用来定义沿着x，y轴2d倾斜。如果在一轴上可以在skew后面加x或者y。

transform-style属性是一个3d空间的一个重要属性，用来指定嵌套元素如何在3d空间里呈现。它的两个主要属性值：flat和preserve-3d。

我们需要注意的就是：这个属性要设置在父元素里面，必须高于任何一个嵌套的变形元素。

我们再总结一下后面加deg还是px或者不加，这个我们容易混淆：

旋转：transform：rotate（5deg）；
缩放：transform：scale（2）；
平移：transform：translate（30px）；
倾斜：transform：skew（30deg）；

这样大家对比一下就不会混淆了。

今天我们就先讲这么多，明天我会给大家总结animation属性，希望大家可以关注我，我现在从web入门开始讲起，期待和大家一起从小白变成小牛。如果文章中有哪些错误或者不足的地方，还希望大佬指出，我会及时更新。

最后认识一下吧，我叫吕恣瑞，分享web开发知识以及学习经验，关注我，你可以有质的飞跃。

我给大家准备了很多学习资料，在公众号主页：

回复【领取福利】，我为大家准备了很多学习资料，比如ppt，python实战，web基础学习，原生js特效，css特效等

回复【进群交流学习】，添加助理微信，助理会拉大家进群，群里有很多公众号号主，学校老师，web领域开发者，不懂得可以发群里，大家一起讨论学习。

我们在web前端相遇，我们也要在web精进这方面成为彼此最好的老师。

感谢大家关注！！！

不清楚地朋友可以参考：学习资料领取点击这里

transform属性详细讲解_2d_02

她的码农

排版

吕恣瑞

技术分享

transform