image.pngimage.png

    1.  <body>
    2.     <div></div> 
    3.  </body>
    1. body {
    2.   display: flex;
    3.   align-items: center;
    4.   justify-content: center;
    5.   min-height: 100vh;
    6.   background: #0d0f1b;
    7.   overflow: hidden;
    8. }
    10. div {
    11.   width: 100px;
    12.   height: 100px;
    14.   background-color: white;
    16.   transition: transform 0.5s;
    17. }
    18. div:hover {
    19.   transform: translate(100px, 100px);
    20. }
    • transition 标识过渡

    image.png
    其中属性property可以写成all，表示对所有属性都会有该过渡方案

    image.png
    image.png
    image.png
    image.png
    如改变旋转的中心，默认以元素中心为旋转中心