HTML中,怎样将图片旋转90度显示

 我来答
黑马程序员
2016-12-14 · 改变中国IT教育,我们正在行动
黑马程序员
黑马程序员为大学毕业后,有理想、有梦想,想从事IT行业的年轻人改变自己的命运。黑马程序员成就IT黑马
向TA提问
展开全部

1   图片的旋转实现方式有很多,比如js实现,现在比较简单的方法是使用css3里面的;transform属性来实现,很方便的。其实这个题目很简单,在百度里面搜索一下css3旋转就看到了 ,里面的手册介绍的很清楚,下面是代码以及显示效果都呈现出来 ; 

2  下面是写的一个实例代码 ,代码可以直接运行 。代码的解释有备注哦 ;总共代码呢其实没有几行,主要就是  transform 属性的应用   代码中的90deg就是90度的意思

<!DOCTYPE html>

<html>

<head>

<style> 

body{margin:0px;padding:0px;}

 /*{transform就是专门为img图片设置的旋转*/

#img1{transform:rotate(90deg); border:1px solid red;} 


</style>

</head>

<body>


<img id="img1" src="38.png"/> /*页面中显示的图片*/

</body>

</html>

3 代码在浏览器的运行效果图 :


推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式