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

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

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

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

<!DOCTYPEhtml>

<html>

<head>

<style>

body{margin:0pxpadding:0px}

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

#img1{transform:rotate(90deg)border:1pxsolidred}

</style>

</head>

<body>

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

</body>

</html>

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

在html中需要将插入的图片左右来回移动,只需要在图片img标签外套一个marquee标签,在里面写上behavior=alternate这句话就可以实现。\x0d\x0a alternate是滚动标签的属性。\x0d\x0ascrolldelay,滚动延时,用于设定两次滚动 *** 作之间的间隔时间,该时间以毫秒为单位。\x0d\x0abehavior,滚动方式。\x0d\x0a\x0d\x0aalternate: 表示在两端之间来回滚动。\x0d\x0ascroll: 表示由一端滚动到另一端,会重复。\x0d\x0aslide: 表示由一端滚动到另一端,不会重复

方案一:直接使用HTML的滚动标签 marquee ,把图片放入滚滚标签内部,代码如下:

<marquee>

<img src='1.jpg'>

<img src='2.jpg'>

<img src='3.jpg'>

<img src='4.jpg'>

</marquee>

方案二:使用第三方插件,比如swiper.js,

插件


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6117081.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-15
下一篇 2023-03-15

发表评论

登录后才能评论

评论列表(0条)

保存