2021-07-08-web前端-旋转相册

46 阅读 0 评论 31 点赞

我是靠谱客的博主呆萌樱桃，最近开发中收集的这篇文章主要介绍2021-07-08-web前端-旋转相册，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

web前端-利用HTML和CSS样式编写旋转相册。
其中有一些2D和3D还有动画的使用。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>旋转相册</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		.main-box{
			width: 300px;
			height: 300px;
			margin: 100px auto;
			position: relative;
			transform-style: preserve-3d;

			/*animation: myLove 10s 1s infinte;*/
			animation-name: myLove;
			animation-duration: 10s;
			animation-timing-function: linear;
			animation-delay: 3s;
			animation-iteration-count: infinite;
		}
		@keyframes myLove {
			0%{
				transform: rotateX(0deg) rotateY(0deg);
			}
			100%{
				transform: rotateX(360deg) rotateY(360deg);
			}
			/*100%{
				transform: rotateX(0deg) rotateY(0deg);
			}*/
		}
		.main-box:hover{
			animation-play-state: paused;
		}
		.main-box li img{
			width: 100%;
			height: 100%;
		}
		.main-box li:nth-child(1){
			width: 300px;
			height: 300px;
			position: absolute;
			left: 0px;
			top: 0px;
			transform: translateZ(150px);
			opacity: 0.5;
		}
		.main-box li:nth-child(2){
			width: 300px;
			height: 300px;
			position: absolute;
			left: 0px;
			top: 0px;
			transform: translateZ(-150px);
			opacity: 0.5;
		}
		.main-box li:nth-child(3){
			width: 300px;
			height: 300px;
			position: absolute;
			left: 0px;
			top: 0px;
			transform: translateX(150px) rotateY(90deg);
			opacity: 0.5;
		}
		.main-box li:nth-child(4){
			width: 300px;
			height: 300px;
			position: absolute;
			left: 0px;
			top: 0px;
			transform: translateX(-150px) rotateY(90deg);
			opacity: 0.5;
		}
		.main-box li:nth-child(5){
			width: 300px;
			height: 300px;
			position: absolute;
			left: 0px;
			top: 0px;
			transform: translateY(150px) rotateX(90deg);
			opacity: 0.5;
		}
		.main-box li:nth-child(6){
			width: 300px;
			height: 300px;
			position: absolute;
			left: 0px;
			top: 0px;
			transform: translateY(-150px) rotateX(90deg);
			opacity: 0.5;
		}
	</style>
</head>
<body>
	<ul class="main-box">
		<li><img src="img/锦鲤附体.jpg"></li>
		<li><img src="img/锦鲤附体.jpg"></li>
		<li><img src="img/锦鲤附体.jpg"></li>
		<li><img src="img/锦鲤附体.jpg"></li>
		<li><img src="img/锦鲤附体.jpg"></li>
		<li><img src="img/锦鲤附体.jpg"></li>
	</ul>
</body>
</html>