3D旋转动画：鼠标互动触发立体相册视觉效果-CSDN博客

本文链接：https://blog.csdn.net/weixin_51774330/article/details/127847023

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	body
	{
		/*视距,观察者与图像的距离*/
		perspective: 800px;
	}
	@keyframes myAnimation{
		from{
			/*运动开始各轴偏转的位置*/
			transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
		}
		to{
			/*运动结束各轴偏转的位置*/
			transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
		}
	}
	/*动画效果相关属性*/
	.container{
		animation-name: myAnimation;
		/*时长*/
		animation-duration: 10s;
		/*速度曲线*/
		animation-timing-function: linear;
		/*循环次数*/
		animation-iteration-count: infinite;
		/*运动状态*/
		animation-play-state: running;
	}
	.container{
		width: 200px;
		height: 200px;
		position: relative;
		margin: 250px auto;
		transform-style: preserve-3d;/*改为3d模式*/
		/*transform:rotateX(45deg) rotateY(45deg);*/
	}
	.container > img{
		width: 200px;
		height: 200px;
		position: absolute;
	}
	.container>img:nth-child(2){
		/*将图片向左移动200个像素*/
		left: -200px;
		/*定义图片的旋转轴,将图像的最右边做为旋转轴*/
		transform-origin: right;
		/*将图片延y轴旋转90°*/
		transform: rotateY(90deg);
	}
	.container>img:nth-child(3){
		right:-200px;
		transform-origin: left;
		transform: rotateY(-90deg);
	}
	.container>img:nth-child(4){
		top: -200px;
		transform-origin: bottom;
		transform: rotateX(-90deg);
	}
	.container>img:nth-child(5){
		bottom: -200px;
		transform-origin: top;
		transform: rotateX(90deg);
	}
	.container>img:nth-child(6){
		transform: translateZ(200px);
	}
	.container:hover>img:nth-child(1){
		transform: translateZ(-100px);
	}
	.container:hover>img:nth-child(2){
		left: -300px;
		transform-origin: right;
		transform: rotateY(90deg);
	}
	.container:hover>img:nth-child(3){
		right:-300px;
		transform-origin: left;
		transform: rotateY(-90deg);
	}
	.container:hover>img:nth-child(4){
		top: -300px;
		transform-origin: bottom;
		transform: rotateX(-90deg);
	}
	.container:hover>img:nth-child(5){
		bottom: -300px;
		transform-origin: top;
		transform: rotateX(90deg);
	}
	.container:hover>img:nth-child(6){
		transform: translatez(300px);
	}
	</style>
</head>
<body>
	<div class="container">
		<img src="C:\Users\....\Desktop\新建文件夹 (3)\1.png">
		<img src="C:\Users\....\Desktop\新建文件夹 (3)\2.png">
		<img src="C:\Users\....\Desktop\新建文件夹 (3)\3.png">
		<img src="C:\Users\....\Desktop\新建文件夹 (3)\4.png">
		<img src="C:\Users\....\Desktop\新建文件夹 (3)\5.png">
		<img src="C:\Users\....\Desktop\新建文件夹 (3)\6.png">
	</div>
</body>
</html>

效果：正方体图片旋转，当鼠标触碰立体相册时，各个面的图片向外伸展。