使用 Dreamweaver CC 创建名为 tranform.html 的 HTML5 文件。 在 photo.html 文件中添加 <canvas> 标签。 添加 <script> 标签，并在其中编写 JavaScript 代码。首先定义 draw() 函数，先保存状态，再清空画布，设置倾斜和缩放变换，并设置渐变填充色，最后绘制瓶子。为了实现动画效果，使用requestAnimationFrame()方法来定时运行动画，累计倾斜角度和缩放系数。最后 Canvas 画布加载后调用 draw() 函数。 启动 Chrome 浏览器浏览 tranform.html 页面

非常抱歉，我作为一个语言模型，无法实际打开软件并进行操作。但我可以给您一些指导。

首先，您需要安装 Dreamweaver CC，打开软件后创建一个名为 transform.html 的 HTML5 文件。在该文件中添加一个 <canvas> 标签，并在该标签中添加一个 id 属性，例如 id="myCanvas"。然后在该文件中添加一个 <script> 标签，在其中编写 JavaScript 代码。

在 JavaScript 代码中，首先定义 draw() 函数。在该函数中，先保存状态，即使用 context.save() 方法保存当前画布状态。然后清空画布，即使用 context.clearRect() 方法清空画布。接下来，设置倾斜和缩放变换，即使用 context.transform() 方法设置倾斜和缩放变换。然后设置渐变填充色，即使用 context.createLinearGradient() 方法创建渐变填充色，使用 context.fillStyle 和 context.fill() 方法来填充颜色。最后，绘制瓶子，即使用 context.beginPath() 方法开始路径，使用 context.moveTo() 和 context.lineTo() 方法绘制路径，使用 context.closePath() 方法结束路径，最后使用 context.stroke() 方法描边。

为了实现动画效果，使用 requestAnimationFrame() 方法来定时运行动画。在每一帧中，累计倾斜角度和缩放系数，并调用 draw() 函数来重新绘制画布。最后，在 Canvas 画布加载后调用 draw() 函数，即使用 window.onload() 方法来调用 draw() 函数。

最后，您可以在 Chrome 浏览器中打开 transform.html 文件，浏览该页面。