css3的transform（translate、rotate、scale、skew属性基本简单使用）

style

html

javascript

 const boxMove = document.getElementById('boxMove');
      const boxMove1 = document.getElementById('boxMove1');
      const boxMove2 = document.getElementById('boxMove2');

      boxMove.onclick = function () {
        boxMove.style.transform = `translate(500px, 50px) rotate(80deg)`;
        boxMove.style.transitionProperty = `transform`;
        boxMove.style.transitionDuration = `3s`;
      };

      boxMove1.onclick = function () {
        boxMove1.style.transform = `translate(300px) rotate(180deg) scale(2) skew(40deg)`;
        boxMove1.style.transitionProperty = `transform`;
        boxMove1.style.transition = `.5s`;
        boxMove1.style.transitionDuration = `3s`;
      };

      boxMove2.onclick = function () {
        boxMove2.style.transform = `translate(300px) rotate(45deg) scale(2)`;
        boxMove2.style.transitionProperty = `transform`;
        boxMove2.style.transitionDuration = `2s`;
      };