变形就是指通过 css 来改变元素的形状或位置
变形不会影响到页面的布局
transform用来设置元素的变形效果

1、平移

  • translateX() 沿着由方向平移
  • translateY() 沿着 y 轴方向平移
  • translateZ() 沿着 z 轴方向平移平移元素

百分比是相对于自身计算的
几种水平垂直双方向居中的方式对比

  1. 绝对定位的方式

    1. /* 这种居中方式，只适用于元素的大小确定 */
    2. position: absolute;
    3. top: 0;
    4. left: 0;
    5. bottom: 0;
    6. right: 0;
    7. margin: auto;

  2. table-cell的方式

    1. /* table-cell的方式具有一定局限性 */
    2. display: table-cell;
    3. vertical-align: middle;
    4. text-align: center;

  3. transform的方式

    1. /* transform变形平移的方式 */
    2. position: absolute;
    3. left: 50%;
    4. top: 50%;
    5. transform: translateX(-50%) translateY(-50%);

    浮出效果

    1. div {
    2. float: left;
    3. width: 200px;
    4. height: 300px;
    5. background-color: silver;
    6. margin: 100px 50px auto 50px;
    7. transition: all 0.3s;
    8. }
    9. div:hover {
    10. box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    11. transform: translateY(-5px);
    12. }

    17-变形：平移、旋转与缩放 - 图1

    2、Z 轴平移

    z 轴平移，调整元素在 z 轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近
    z 轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果必须要设置网页的视距

    透视效果

    1. html {
    2. background-color: rgb(71, 44, 32);
    3. perspective: 800px;
    4. }
    5. .box {
    6. width: 200px;
    7. height: 300px;
    8. background-color: silver;
    9. margin: 100px auto;
    10. transition: all 0.3s;
    11. }
    12. .box:hover {
    13. box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    14. transform: translateZ(200px);
    15. }

    17-变形：平移、旋转与缩放 - 图2

    3、旋转

    通过旋转可以使元素沿着 x、y 或 z 旋转指定的角度

  • rotateX()
  • rotateY()

  • rotateZ()

    1. /* transform: rotateY(0.5turn); */
    2. transform: rotateY(180deg);

    17-变形：平移、旋转与缩放 - 图3

    4、缩放

    对元素进行缩放的函数

  • scalex() 水平方向缩放

  • scaleY() 垂直方向缩放
  • scale() 双方向的缩放
    1. .box {
    2. height: 200px;
    3. width: 200px;
    4. background-color: #bfa;
    5. margin: 200px auto;
    6. transition: 2s;
    7. }
    8. .box:hover {
    9. /* transform: scaleX(2); */
    10. /* transform: scaleY(2); */
    11. transform: scale(2);
    12. /* 变形的原点 */
    13. transform-origin: 0 0;
    14. }
    17-变形：平移、旋转与缩放 - 图4

    5、实战

    鸭子表

    html 代码
    1. <div class="clock">
    2. <div class="hour-wrapper">
    3.   <div class="hour"></div>
    4. </div>
    5. <div class="minute-wrapper">
    6.   <div class="minute"></div>
    7. </div>
    8. <div class="second-wrapper">
    9.   <div class="second"></div>
    10. </div>
    11. </div>
    css 代码
    1. .clock {
    2. width: 500px;
    3. height: 500px;
    4. background-image: url("assets/鸭子表/clock.png");
    5. background-image: url("assets/鸭子表/clock_duck.jpg");
    6. background-size: cover;
    7. margin: 100px auto;
    8. position: relative;
    9. }
    10. .clock > div {
    11. position: absolute;
    12. top: 0;
    13. bottom: 0;
    14. left: 0;
    15. right: 0;
    16. margin: auto;
    17. }
    18. .clock > div > div {
    19. height: 50%;
    20. margin: 0 auto;
    21. }
    22. /* 时针 */
    23. .hour-wrapper {
    24. height: 60%;
    25. width: 60%;
    26. animation: clock-run 720s infinite;
    27. }
    28. .hour {
    29. width: 8px;
    30. background-color: black;
    31. }
    32. /* 分针 */
    33. .minute-wrapper {
    34. height: 75%;
    35. width: 75%;
    36. animation: clock-run 60s steps(60) infinite;
    37. }
    38. .minute {
    39. width: 4px;
    40. background-color: black;
    41. }
    42. /* 秒针 */
    43. .second-wrapper {
    44. height: 90%;
    45. width: 90%;
    46. animation: clock-run 1s steps(60) infinite;
    47. }
    48. .second {
    49. width: 2px;
    50. background-color: red;
    51. }
    52. @keyframes clock-run {
    53. from {
    54.   transform: rotateZ(0);
    55. }
    56. to {
    57.   transform: rotateZ(360deg);
    58. }
    59. }
    17-变形：平移、旋转与缩放 - 图5

    复仇者联盟

    html 代码
    1. <div class="cube">
    2. <div class="surface1"></div>
    3. <div class="surface2"></div>
    4. <div class="surface3"></div>
    5. <div class="surface4"></div>
    6. <div class="surface5"></div>
    7. <div class="surface6"></div>
    8. </div>
    css 代码
    1. html {
    2. perspective: 800px;
    3. }
    4. .cube {
    5. height: 200px;
    6. width: 200px;
    7. margin: 200px auto;
    8. position: relative;
    9. /* 设置3d变形效果 */
    10. transform-style: preserve-3d;
    11. animation: cube-rotate 12s infinite linear;
    12. }
    13. .cube div {
    14. height: 200px;
    15. width: 200px;
    16. background-size: cover;
    17. position: absolute;
    18. top: 0;
    19. left: 0;
    20. /* 为元素设置透明效果 */
    21. opacity: 0.85;
    22. }
    23. .surface1 {
    24. background-image: url("/assets/复仇者联盟/1.jpg");
    25. transform: translateX(-100px) rotateY(90deg);
    26. }
    27. .surface2 {
    28. background-image: url("/assets/复仇者联盟/2.jpg");
    29. transform: translateX(100px) rotateY(90deg);
    30. }
    31. .surface3 {
    32. background-image: url("/assets/复仇者联盟/3.jpg");
    33. transform: translateY(-100px) rotateX(90deg);
    34. }
    35. .surface4 {
    36. background-image: url("/assets/复仇者联盟/4.jpg");
    37. transform: translateY(100px) rotateX(90deg);
    38. }
    39. .surface5 {
    40. background-image: url("/assets/复仇者联盟/5.jpg");
    41. transform: translateZ(-100px);
    42. }
    43. .surface6 {
    44. background-image: url("/assets/复仇者联盟/6.jpg");
    45. transform: translateZ(100px);
    46. }
    47. @keyframes cube-rotate {
    48. from {
    49.   transform: rotateX(0) rotateY(0) rotateZ(0);
    50. }
    51. to {
    52.   transform: rotateX(1turn) rotateY(2turn) rotateZ(3turn);
    53. }
    54. }
    17-变形：平移、旋转与缩放 - 图6