角度动画缩放宽度和高度 - Javascript

在Javascript中，可以使用CSS3中的transform属性以及transition属性实现角度动画缩放宽度和高度。具体步骤如下：

HTML结构

<div id="box"></div>

CSS样式

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s ease;
}

Javascript代码

const box = document.getElementById('box');

function scale(angle, scaleWidth, scaleHeight) {
  box.style.transform = `rotate(${angle}deg) scaleX(${scaleWidth}) scaleY(${scaleHeight})`;
}

以上代码中，我们定义了一个scale函数，其中angle表示旋转的角度，scaleWidth和scaleHeight表示缩放宽度和高度的比例。通过将这些参数传递给transform属性，我们可以实现角度动画缩放。

我们可以使用以下代码调用scale函数：

scale(45, 1.5, 0.5);

以上代码会将元素旋转45度并将宽度增加50%，同时将高度减少50%。此外，在CSS样式中设置的transition属性可以让我们使缩放过程变得平滑。

上面代码片段的markdown格式如下：

# 角度动画缩放宽度和高度 - Javascript

在Javascript中，可以使用CSS3中的transform属性以及transition属性实现角度动画缩放宽度和高度。具体步骤如下：

## HTML结构

```html
<div id="box"></div>

CSS样式

#box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: all 1s ease;
}

Javascript代码

const box = document.getElementById('box');

function scale(angle, scaleWidth, scaleHeight) {
  box.style.transform = `rotate(${angle}deg) scaleX(${scaleWidth}) scaleY(${scaleHeight})`;
}

以上代码中，我们定义了一个scale函数，其中angle表示旋转的角度，scaleWidth和scaleHeight表示缩放宽度和高度的比例。通过将这些参数传递给transform属性，我们可以实现角度动画缩放。

我们可以使用以下代码调用scale函数：

scale(45, 1.5, 0.5);

以上代码会将元素旋转45度并将宽度增加50%，同时将高度减少50%。此外，在CSS样式中设置的transition属性可以让我们使缩放过程变得平滑。