如何使用CSS3属性控制图片旋转和变大

 时间:2026-04-21 20:36:26

1、第一步,双击打开HBuilder编辑工具,新建静态页面img.html,如下图所示:

如何使用CSS3属性控制图片旋转和变大

2、第二步,在<body></body>插入一个<div></div>标签,并在div中插入img标签元素,设置图片的高度和宽度,如下图所示:

如何使用CSS3属性控制图片旋转和变大

3、第三步,设置图片旋转和变大属性值,利用transform属性和transition属性,如下图所示:

如何使用CSS3属性控制图片旋转和变大

4、第四步,保存代码并预览页面效果,查看图片的效果,如下图所示:

如何使用CSS3属性控制图片旋转和变大

5、第五步,修改img图片元素的transform不同状态下的属性值,缩放值不一样,如下图所示:

如何使用CSS3属性控制图片旋转和变大

6、第六步,去掉transform属性值,只留下scale属性值,控制图片的缩放,如下图所示:

如何使用CSS3属性控制图片旋转和变大

  • jquery如何实现鼠标放上div时改变其大小
  • css如何设置文本以反方向显示
  • html+css怎么实现横向导航
  • [HTML5应用] CSS3倾斜的网页图片
  • 如何用CSS修改不同input标签的样式
  • 热门搜索
    怎么做寿司详细步骤 吉林师范大学怎么样 windows防火墙怎么关 大王纸尿裤怎么样 阶梯电价怎么算 上环后多久可以同房 用wps怎么做ppt 脸上长了黄褐斑怎么办 脸上红血丝怎么去掉 手机反应慢怎么解决