HTML+css+JavaScript 实例应用图片旋转切换效果

最新推荐文章于 2024-08-10 10:42:27 发布

cheche-m

最新推荐文章于 2024-08-10 10:42:27 发布

阅读量1.8k

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_39557219/article/details/76851419

版权

本文分享了如何使用HTML、CSS和JavaScript创建一个九宫格图片旋转切换的效果页面，包括完成此效果的基本步骤，并鼓励读者查阅相关文档API进行深入学习。

摘要由CSDN通过智能技术生成

今天照着网上视频做了一个九宫格图片旋转切换效果页面，做完后我又自己做了个类似的简单页面。在此分享！不懂的可以查找相应的文档API~

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

	<title>test</title>
<style type="text/css">
	*{ margin:0;padding:0;}
	body{background: #FFEDB2;}
	.pic{width: 1060px;margin:10px auto;}
	.pic_img{width: 240px;height: 400px;float: left;margin: 10px 10px ;position: relative;
		border: 2px groove #B300ff; box-shadow: 0 0  10px #B300ff;overflow: hidden;}
	.pic_img p{width: 240px;height: 400px;background: pink;font-size: 50px;color: #B300ff;text-align: center;line-height: 300px;}
	.pic_img div{position: absolute;left: 0;top: 0;transform-origin: left bottom;
		transform: rotate(-100deg);transition: transform 1s;}
	.pic .top_s div  {transform: rotate(0deg);}
</style>

</head>
<body>
	<div class="pic">