制作旋转相册css

最新推荐文章于 2024-01-03 13:48:33 发布

月疯

最新推荐文章于 2024-01-03 13:48:33 发布

阅读量193

点赞数

分类专栏：【HTML5】

本文链接：https://blog.csdn.net/chehec2010/article/details/119546986

版权

【HTML5】专栏收录该内容

45 篇文章 6 订阅

订阅专栏

这段代码展示了如何使用HTML、CSS和JavaScript实现一个3D图片轮播效果。背景图片和旋转的图片通过CSS3的transform属性进行定位和旋转，同时运用了关键帧动画来实现平滑的360度转动。此效果适用于前端页面展示。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body,html{
				height: 100%;
			}
			body{
				background: url(img/bj.jpg) no-repeat center;
				background-size: 100% 100%;
			}
			section{
				width: 280px;
				height: 400px;
				background: url(img/gf.gif) no-repeat center;
				background-size: 50% 50%;
				position: fixed;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				transform-style: preserve-3d;
				/* 动画名字、持续时间、运动类型、循环动画 */
				animation: huitao 30s linear infinite;
			}
			section img{
				display: block;
				width: 280px;
				height: 400px;
				position: absolute;
				/* 设置变形原点 */
				transform-origin: center center -600px;
			}
			img:nth-child(1){
				transform: translateZ(600px);
			}
			img:nth-child(2){
				transform: translateZ(600px) rotateY(36deg);
			}
			img:nth-child(3){
				transform: translateZ(600px) rotateY(72deg);
			}
			img:nth-child(4){
				transform: translateZ(600px) rotateY(108deg);
			}
			img:nth-child(5){
				transform: translateZ(600px) rotateY(144deg);
			}
			img:nth-child(6){
				transform: translateZ(600px) rotateY(188deg);
			}
			img:nth-child(7){
				transform: translateZ(600px) rotateY(216deg);
			}
			img:nth-child(8){
				transform: translateZ(600px) rotateY(252deg);
			}
			img:nth-child(9){
				transform: translateZ(600px) rotateY(288deg);
			}
			img:nth-child(10){
				transform: translateZ(600px) rotateY(324deg);
			}
			@keyframes huitao{
				0%{
					transform: rotateX(0deg) rotateY(0deg);
				}
				25%{
					transform: rotateX(20deg) rotateY(180deg);
				}
				50%{
					transform: rotateX(0deg) rotateY(360deg);
				}
				75%{
					transform: rotateX(-20deg) rotateY(540deg);
				}
				100%{
					transform: rotateX(0deg) rotateY(720deg);
				}
			}
		</style>
	</head>
	<body>
		<section>
			<img src="img/1.jpg" />
			<img src="img/2.jpg" />
			<img src="img/3.jpg" />
			<img src="img/4.jpg" />
			<img src="img/5.jpg" />
			<img src="img/6.jpg" />
			<img src="img/7.jpg" />
			<img src="img/8.jpg" />
			<img src="img/9.jpg" />
			<img src="img/10.jpg" />
		</section>
	</body>
</html>

月疯

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
制作旋转相册css

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body,html{ height: 100%; } body{ background: url(img...
复制链接

扫一扫

专栏目录