前端深刻之css篇丨2020年前，完全掌握css动画【transform】

时间 2019-11-06

标签前端深刻 css 2020年完全掌握动画 transform 栏目 CSS 繁體版

原文原文链接

写在前面

立刻就2020年了，不知道小伙伴们今年学习了css3动画了吗？css

提及来css动画是一个很尬的事，一方面由于公司用css动画比较少，另外一方面大部分开发者习惯了用JavaScript来作动画，因此就致使了许多程序员比较排斥来学习css动画（至少我是），可是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画以后，你会被它的魅力所吸引的，它能够减小代码量、提升性能。html

前面几篇文章咱们已经一块儿学习了animation和transition 的使用，若是有不了解的同窗能够查看个人以前的文章。前端

今天咱们终于开始学习transform和translate了，其实translate只是transform的一个属性，只是不少初学者对transform（变形）、translate（移动）和transition（过渡）容易混淆，因此我把它们放到一块来写了，小伙伴们可不要混淆啊。css3

话很少说，立刻跟我一块儿学习今天的主角transform吧。程序员

transform 语法

值	描述
none	定义不进行转换。
translate(x,y)	定义 2D 转换。
translate3d(x,y,z)	定义 3D 转换。
translateX(x)	定义转换，只是用 X 轴的值。
translateY(y)	定义转换，只是用 Y 轴的值。
translateZ(z)	定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)	定义 2D 缩放转换。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	经过设置 X 轴的值来定义缩放转换。
scaleY(y)	经过设置 Y 轴的值来定义缩放转换。
scaleZ(z)	经过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿着 X 轴的 3D 旋转。
rotateY(angle)	定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)	定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)	定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)	定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)	为 3D 转换元素定义透视视图.

transform字面上就是变形，改变的意思。看起来他有不少属性，其实咱们把经常使用的总结起来就是下面四个属性。css3动画

rotate(旋转)
skew(扭曲)
scale(缩放)
translate(移动)

rotate 旋转

<style> img{ margin-left: 50px; width:50px; height:50px; border-radius:50%; } @keyframes rotate{ 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} } @keyframes rotateX{ 0% {transform:rotateX(0deg);} 100% {transform:rotateX(360deg);} } @keyframes rotateY{ 0% {transform:rotateY(0deg);} 100% {transform:rotateY(360deg);} } .rotate{ animation:rotate 2s infinite linear; } .rotateX{ animation:rotateX 2s infinite linear; } .rotateY{ animation:rotateY 2s infinite linear; } </style>
<body>
    <img src="./y.png" alt="" class="rotate">
    <img src="./y.png" alt="" class="rotateX">
    <img src="./y.png" alt="" class="rotateY">
</body>
复制代码

这里一共有三个属性的展现rotate，rotateX，rotateY。分别表明在平面上根据指定角度进行旋转、沿着X轴进行指定角度的旋转、沿着Y轴进行制定角度的旋转。前端工程师

translate 移动

<style> img{ margin-left: 50px; width:50px; height:50px; border-radius:50%; } @keyframes translate{ 0% {transform:translate(0px,0px);} 100% {transform:translate(100px,100px);} } @keyframes translateX{ 0% {transform:translateX(0px);} 100% {transform:translateX(100px);} } @keyframes translateY{ 0% {transform:translateY(0px);} 100% {transform:translateY(100px);} } .translate{ animation:translate 2s infinite linear; } .translateX{ animation:translateX 2s infinite linear; } .translateY{ animation:translateY 2s infinite linear; } </style>
<body>
    <img src="./y.png" alt="" class="translate">
    <img src="./y.png" alt="" class="translateX">
    <img src="./y.png" alt="" class="translateY">
</body>
复制代码

这里一共有三个属性的展现translate(x,y)，translateX(x)，translateY(Y)。分别表明水平方向和垂直方向同时移动、仅水平方向移动、仅垂直方向移动。性能

scale 缩放

<style> img{ margin-left: 50px; width:50px; height:50px; border-radius:50%; } @keyframes scale{ 0% {transform:scale(0.1,0.1);} 100% {transform:scale(1,1);} } @keyframes scaleX{ 0% {transform:scaleX(0.1);} 100% {transform:scaleX(1);} } @keyframes scaleY{ 0% {transform:scaleY(0.1);} 100% {transform:scaleY(1);} } .scale{ animation:scale 2s infinite linear; } .scaleX{ animation:scaleX 2s infinite linear; } .scaleY{ animation:scaleY 2s infinite linear; } </style>
<body>
    <img src="./y.png" alt="" class="scale">
    <img src="./y.png" alt="" class="scaleX">
    <img src="./y.png" alt="" class="scaleY">
</body>
复制代码

这里一共有三个属性的展现scale(x,y)，scaleX(x)，scaleY(Y)。分别表明水平方向和垂直方向同时缩放、仅水平方向缩放、仅垂直方向缩放。但它们具备相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，若是其值大于1元素就放大，反之其值小于1，元素缩小。学习

skew 扭曲

<style> img{ margin-left: 50px; width:50px; height:50px; /* border-radius:50%; */ } @keyframes skew{ 0% {transform:skew(0deg,0deg);} 100% {transform:skew(25deg,25deg);} } @keyframes skewX{ 0% {transform:skewX(0deg);} 100% {transform:skewX(25deg);} } @keyframes skewY{ 0% {transform:skewY(0deg);} 100% {transform:skewY(25deg);} } .skew{ animation:skew 2s infinite linear; } .skewX{ animation:skewX 2s infinite linear; } .skewY{ animation:skewY 2s infinite linear; } </style>
<body>
    <img src="./y.png" alt="" class="skew">
    <img src="./y.png" alt="" class="skewX">
    <img src="./y.png" alt="" class="skewY">
</body>
复制代码

这里一共有三个属性的展现skew(x,y)，skew(x)，skewY(Y)。分别表明水平方向和垂直方向同时扭曲、仅水平方向扭曲、仅垂直方向扭曲。动画

结论

今天咱们一块儿学习了transform的常见属性，你会发现他们其实很是简单，你只须要记住rotate(旋转)、skew(扭曲)、scale(缩放)、translate(移动)就能够了，所表明的的含义就是会像X和Y轴同时变形，而加上X或者Y就表明会向着该方向进行变形。

到如今为止咱们一块儿学完了css3动画的全部内容，剩下的就须要你来多加练习，在其余网站上看到了有趣的动画要想办法用css动画来实现它，在你真正练习过以后，你将会真正掌握它，这样你就算作在2020年前掌握了css动画！

结语

以上就是本文章的所有内容了，若是有不正确的地方欢迎指正。

感谢您的阅读，若是感受有用不妨点赞/转发。

前端深刻系列是一个踩坑系列，是由我本人对工做和学习中所遇到的问题和踩过的坑的一个探索与总结，在此记录分享出去，同时也是对自我技能的一个反思和追问。

前端路漫，踩坑不断。

前端深刻系列持续更新中……

以上2019-10-30。