怎么在HBuilder中设置图片自动旋转

 时间:2024-10-13 02:08:54

1、第一步,先建一个web项目,项目名称是“XuanZhuan”,如下图,选择放置在桌面,方便查找

怎么在HBuilder中设置图片自动旋转
怎么在HBuilder中设置图片自动旋转

2、第二步,打开index.html,新建一个框架,设置宽度(width) 、高度(height)以及边框(border)颜色,在页面选择打开我们的浏览器,就可以看到我们新建框架的效果图,如下图。

怎么在HBuilder中设置图片自动旋转
怎么在HBuilder中设置图片自动旋转

3、第三步,从桌面打开我们刚刚新建的“XuanZhaun”的文件夹,从网上下载一张图片,放到“img”文件夹中,打开就可以看到我们保存好的图片了,如下图

怎么在HBuilder中设置图片自动旋转
怎么在HBuilder中设置图片自动旋转

4、第四步,接下来就是回到HBuilder中插入我们保存好的图片,设置图片的宽度(width)和高度(height),使其铺满整个框架,不会溢出边框

怎么在HBuilder中设置图片自动旋转

5、第五步,设置边框的旋转方式、方向、以及角度,打开我们刚刚打开的IE浏览器,就可以看到图片已经开始旋转,只不过还是静态的,如下图

怎么在HBuilder中设置图片自动旋转
怎么在HBuilder中设置图片自动旋转

6、第六步,接下来添加一个可以自动旋转的标签,rotateY()标签是垂直旋转,这样做到这里图片就可以自动的旋转啦。

怎么在HBuilder中设置图片自动旋转

7、效果图,顶部喔!!!大家可以试试喔

  • 在css中如何设置左浮动和右浮动?
  • html轮播图怎么制作
  • 如何在HTML中插入图片
  • 实现整个html居中最简单方法
  • HTML中引入css和js的方法
  • 热门搜索
    校园手抄报内容 手抄报的版面设计 科学手抄报图片 三年级上册手抄报 手抄报的图案 我爱读书手抄报资料 安全出行手抄报内容 鲁迅的手抄报 安全手抄报内容大全 庆十一手抄报