【JavaScript实例】图片旋转

最新推荐文章于 2023-08-29 14:27:36 发布

我真的不会打代码

最新推荐文章于 2023-08-29 14:27:36 发布

阅读量272

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_44637000/article/details/108890872

版权

css js css3

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

鼠标移到图片上，图片旋转720度

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>旋转</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul li{
				list-style: none;
				float: left;
				height: 90px;
				width: 88px;
				margin: 15px;
			}
			#ul{
				height: 300px;
				width: 600px;
				margin: 50px;
			}
			#ul li:nth-of-type(1){
				background: url(../img/icon.png) no-repeat;
			}
			#ul li:nth-of-type(2){
				background: url(../img/icon.png) -88px no-repeat;
			}
			#ul li:nth-of-type(3){
				background: url(../img/icon.png)   -176px no-repeat;
			}
			.li:hover{
				-webkit-transform: rotateY(360deg);
				transition: all 0.8s ease-in-out;
			}
			
		</style>
	</head>
	<body>
		<section>
			<aside>
				<ul id="ul">
					<li class="li"></li>
					<li class="li"></li>
					<li class="li"></li>
				</ul>
			</aside>
		</section>
	</body>
	
</html>

我真的不会打代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript实例】图片旋转

鼠标移到图片上，图片旋转720度<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>旋转</title> <style> *{ margin: 0; padding: 0; } ul li{ list-style: none; float: left; height: 90px;
复制链接

扫一扫