day 04

最新推荐文章于 2024-05-30 15:07:12 发布

海底恶霸章鱼哥

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量55

点赞数

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_57323666/article/details/127854534

版权

立体相册

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				perspective: 500px;
			}
			@keyframes myAnimation {
			 from{
			 transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
			 }
			 to{
			 transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
			 }
			 }
			.container{
				position: relative;
				width: 200px;
				height: 200px;
				margin: 300px auto;
				transform-style: preserve-3d;
				animation: myAnimation 10s infinite linear;
			}
			.container > img{
				width: 200px;
				height: 200px;
				position: absolute;
			
			}
			.container > img:nth-child(2){
				left:-200px ;
				transform: rotateY(90deg);
				transform-origin: right;
			}
			.container:hover > img:nth-child(2){
			 transform: translateX(-100px)rotateY(90deg);
			 }
			.container > img:nth-child(3){
				right:-200px ;
				transform: rotateY(-90deg);
				transform-origin: left;
			}
			.container:hover > img:nth-child(3){
			 transform:translateX(100px) rotateY(-90deg);
			 }
			.container > img:nth-child(4){
				top:-200px ;
				transform: rotateX(-90deg);
				transform-origin: bottom;
			}
			.container:hover > img:nth-child(4){
			 transform: translateY(-100px) rotateX(-90deg);
			 }
			.container > img:nth-child(5){
				bottom:-200px ;
				transform: rotateX(90deg);
				transform-origin: top;
			}
			.container:hover > img:nth-child(5){
			 transform: translateY(100px) rotateX(90deg);
			 }
			.container > img:nth-child(6){
				transform: translateZ(200px);
			}
			.container:hover > img:last-child{
			 transform: translateZ(300px);
			 }
			 .container:hover > img:first-child{
			 transform: translateZ(-100px);
			 }
				 
			
		</style>
	</head>
	<body>
		<div class="container">
			<img src="D:\web前端\picture\绿皮书.png" alt="">
			<img src="D:\web前端\picture\蜘蛛侠.png" alt="">
			<img src="D:\web前端\picture\楚门的世界.png" alt="">
			<img src="D:\web前端\picture\肖申克的救赎.png" alt="">
			<img src="D:\web前端\picture\钢铁侠.png" alt="">
			<img src="D:\web前端\picture\泰坦尼克号.png" alt="">
		</div>
		
	</body>
</html>