transform

transform 属性是一个简写属性，由 rotate 、 translate 、 scale 、 skew 这四个变形函数组成。

书写时每个变形函数用空格隔开，执行时从左往右，确保每个变形函数都是有效的，如何有一个没有效整个属性都将失效。

不同的变形顺序，不同的结果。

  1. <style>
  2. .one {
  3.   width: 150px;
  4.   height: 150px;
  5.   background: rgba(136, 160, 63, 0.5);
  6.   transition: transform 1s;
  7. }
  9. .two {
  10.   width: 150px;
  11.   height: 150px;
  12.   background: rgba(136, 160, 63, 0.5);
  13.   transition: transform 1s;
  14. }
  16. .one:hover {
  17.   transform: translateX(100px) rotate(45deg);
  18. }
  20. .two:hover {
  21.   transform: rotate(45deg) translateX(100px) ;
  22. }
  23. </style>
  25. <body>
  26.   <div class='one'></div>
  27.   <div class='two'></div>
  28. </body>

transform-one.gif

transform-two.gif

transform-origin

transform-origin 指定变形原点，初始值：50% 50%。

2D 的变形原点是由 X 轴和 Y 轴决定的。

  1. x轴: left | center | right | <length> | <percentage>
  2. y轴: top | center | bottom | <length> | <percentage>

关键字

  1. x轴
  2. left: 0%  center: 50%  right: 100%
  3. y轴
  4. top: 0%  center: 50%  bottom: 100%

transform 属性用法（2D） - 图3

注意：x 轴数值表示在 x 轴上离 0 点（元素边框外侧左上角）的偏移量；y 轴数值表示在 y 轴上离 0 点的偏移量。

注意：其中 x 轴的百分比相对于元素的宽度和（width+横向 padding+横向 border），即包含块的宽度；而 y 轴的百分比相对于元素的高度和（height+纵向 padding+纵向 border），即包含块的高度。

注意：只有一个值时，默认第二个值 center。

rotate 函数

rotate旋转函数可以让元素通过指定的角度（deg）根据变形原点进行顺时针旋转，默认为 0deg。

注意：元素旋转后，元素的 x 轴和 y 轴也跟着发生旋转。若元素要进行其他变形操作，则沿着旋转后的 x 轴和 y 轴进行变形。

注意：当 N 为正数时，元素进行顺时针旋转；当 N 为负数时，元素进行逆时针旋转。

  1. <style>
  2. .bg {
  3.   background: rgba(136, 160, 63, 0.5);
  4.   width:150px;
  5.   height: 150px;
  6. }
  8. .demo {
  9.   width: 150px;
  10.   height: 150px;
  11.   background:  rgba(136, 160, 63, 0.5);
  12.   transition: transform 1s;
  13.   transform-origin: center;
  14. }
  16. .demo:hover {
  17.   transform: rotate(360deg);
  18. }
  19. </style>
  21. <div class='bg'>
  22.     <div class='demo'></div>
  23.   </div>

transform-rotate.gif

translate 函数

translate 位移函数可以使元素从原来的位置上移动指定的位移，有三种写法：translate()、translateX()、translateY()。

注意：元素发生位移后，元素的 x 轴和 y 轴跟着也一并移动，若元素再进行其他的变形操作，则要沿着改变后的x轴和y轴进行变形。

注意：translateX(x) 相当于 translate(x, 0)，translateY(y) 相当于 translate(0, y)。

注意：位移函数还可以接受百分比，其中 x% 相对于元素水平方向的宽度和，y% 相对于元素垂直方向的高度和。

  1. <style>
  2. .bg {
  3.   background: rgba(136, 160, 63, 0.5);
  4.   width:150px;
  5.   height: 150px;
  6. }
  7. .demo {
  8.   width: 150px;
  9.   height: 150px;
  10.   background:  rgba(136, 160, 63, 0.5);
  11.   transition: transform 1s;
  12.   transform-origin: center;
  13. }
  15. .demo:hover {
  16.   transform: translateX(100%)
  17. }
  18. </style>
  20. <body>
  21. <div class='bg'>
  22.   <div class="demo"></div>  
  23. </div>
  24. </body>

transform-tranlateX.gif

  1. <style>
  2. /* 上面代码换成 */
  3. .demo:hover {
  4.   transform: translateY(100%)
  5. }
  6. </style>

transform-tranlateY.gif

  1. <style>
  2. /* 上面代码换成 */
  3. .demo:hover {
  4.   transform: translate(100%, 100%)
  5. }
  6. </style>

transform-tranlate.gif

scale 函数

scale 缩放函数可以让元素根据变形原点进行缩放，默认缩放值为1，有三种写法：scale()、scaleX()、scaleY()。

注意：scaleX(x) 相当于 scale(x, 1)，scaleY(y) 相当于 scale(1, y)。

注意：当元素被缩放后，若元素要进行位移，数值类型的位移值要乘以该缩放比例；百分比类型的位移值乘以原来的宽度和或高度和转换成数值类型后，再乘以缩放比例。

注意：scale() 只有一个值时，则用作两个轴的缩放值。如果 x 或 y 为负z值时，元素先翻转再缩放。

  1. <style>
  2. .bg {
  3.   background: rgba(136, 160, 63, 0.5);
  4.   width:150px;
  5.   height: 150px;
  6.   margin: 100px;
  7. }
  9. .demo {
  10.   width: 150px;
  11.   height: 150px;
  12.   background:  rgba(136, 160, 63, 0.5);
  13.   transition: transform 1s ease;
  14.   transform-origin: center;
  15. }
  17. .demo:hover {
  18.   transform: scale(1.5)
  19. }
  20. </style>
  22. <div class="bg">
  23.   <div class="demo"></div>
  24. </div>

transform-scale.gif

  1. <style>
  2. /* 上面代码换成 */
  3. .demo:hover {
  4.     transform: scale(-1.5)
  5. }
  6. </style>

transform-scale-negative.gif

skew 函数

skew 倾斜函数可以让元素以其变形原点围绕 x 轴和 y 轴进行一定角度的倾斜，有三种写法：skew()、skewX()、skewY()。

注意：元素倾斜后，x 轴和 y 轴发生倾斜，若元素要进行其他变形操作，则沿着倾斜后的 x 轴和 y 轴进行变形。

注意：x 表示 y 轴向 x 轴倾斜的角度，y 表示x轴向 y 轴倾斜的角度。

  • x>0 时，表示 y 轴向 x 轴正方向倾斜；x<0 时，表示 y 轴向 x 轴负方向倾斜。
  • y>0 时，表示 x 轴向 y 轴正方向倾斜；y<0 时，表示 x 轴向 y 轴负方向倾斜。

注意：skewX(x) 相当于 skew(x, 0)，skewY(y) 相当于 skew(0, y)。

  1. <style>
  2. .bg {
  3.   width: 150px;
  4.   height: 150px;
  5.   background: rgba(136, 160, 63, 0.5);
  6.   margin: 100px;
  7.   position: relative;
  8. }
  10. .demo {
  11.   width: 150px;
  12.   height: 150px;
  13.   background: rgba(136, 160, 63, 0.5);
  14.   transition: transform 1s;
  15. }
  17. .demo:hover {
  18.   transform: skewX(45deg);
  19. }
  20. </style>
  22. <body>
  23. <div class='bg'>
  24.     <div class='demo'></div>
  25. </div>
  26. </body>

transform-skewX.gif

  1. <style>
  2. /* 上面代码换成 */
  3. .demo:hover {
  4.     transform: skewY(45deg);
  5. }
  6. </style>

transform-skewY.gif

  1. <style>
  2. /* 上面代码换成 */
  3. .demo:hover {
  4.     transform: skew(45deg, 45deg);
  5. }
  6. </style>

transform-skew.gif

参考：
[1] CSS变形transform(2d)
[2] CSS变形与动画
[3] transform