CSS实现立体旋转相册

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

夏天的海！

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

阅读量425

点赞数 7

文章标签： css css3 前端

本文链接：https://blog.csdn.net/CvtNhso/article/details/135297568

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@keyframes mydh{
				from{
					transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
				}
				to{
					transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
				}
			}
			body{
				perspective: 1500px;
			}
			
			
			div{
				margin: 200px;
				transform-style:preserve-3d;
				position: relative;
				animation: mydh 5s linear infinite
			}
			.container:hover>img:first-child{
				left:-100px;
			}
			.container:hover>img:nth-child(2){
				left: 100px;
			}
			.container:hover>img:nth-child(3){
				top: -100px;
			}
			.container:hover>img:nth-child(4){
				top: 100px;
			}
			.container:hover>img:nth-child(5){
				transform: translateZ(-100px);
			}
			.container:hover>img:last-child{
				transform:translateZ(400px);
			}
			.container>img{
				width: 300px;
				height: 300px;
				position: absolute;
				transition:3s;
			}
			.container>img:first-child{
				transform-origin: left;
				transform: rotateY(-90deg);
			}
			.container>img:nth-child(2){		
				transform-origin: right;
				transform:rotateY(90deg);
			}
			.container>img:nth-child(3){
				transform-origin:top;
				transform: rotateX(90deg);
			}
			.container>img:nth-child(4){
				transform-origin:bottom;
				transform: rotateX(-90deg);
			}
			.container>img:nth-child(5){
				
			}
			.container>img:last-child{
				transform: translateZ(300px)
			}
		</style>
	</head>
	<body>
		<div class="container">
			<img src="https://img.pcauto.com.cn/images/upload/upc/tx/auto5/1412/24/c0/1044040_1044040_1419390248445_800x600.webp" alt="">
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F792e60f9-ba56-4431-8b95-45fcf143215b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706180973&t=0fcee5fd78b88464ed6ad58f9f516e78" alt="">
			<img src="https://img2.baidu.com/it/u=2428806971,101352491&fm=253&fmt=auto&app=120&f=JPEG?w=664&h=385" alt="">
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F760dcd04-6655-4fc0-8bec-a9071ab4df2b%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706176009&t=7422ba08ac29a28eca1469bb85623453" alt="">
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F601d5df0-a807-4904-b843-9a9b070f0edc%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706176060&t=c7e2affa52e350dbff8f2310a238eecb" alt="">
			<img src="https://img2.baidu.com/it/u=3470408221,532936394&fm=253&fmt=auto&app=138&f=JPEG?w=698&h=500" alt="">
		</div>
	</body>
</html>