html变换效果

最新推荐文章于 2024-10-09 23:02:44 发布

xiao_q1

最新推荐文章于 2024-10-09 23:02:44 发布

阅读量166

点赞数

分类专栏：作业文章标签： html 前端 css

本文链接：https://blog.csdn.net/xiao_q1/article/details/127909164

版权

作业专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第五天</title>
	</head>
	<style>
		body{
			perspective: 800px;
		}
		@keyframes myAction{
			from{
				transform: rotateX(0) rotateY(0) rotateZ(0);
				
			}
			to{
				transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
			}
		}
		.container{
			animation: myAction 5s infinite linear;
			width:200px;
			height: 200px;
			margin: 300px auto;
			position: relative;
			border: 1px solid black;
			transform-style: preserve-3d;
			transform: rotateX(30deg) rotateY(30deg);
		}
		.container >img{
			width: 200px;
			height: 200px;
			position: absolute;
		}
		.container>img:nth-child(2){
			left: -200px;
			transform: rotateY(90deg);
			transform-origin: right;
		}
		.container >img:nth-child(3){
			right: -200px;
			transform: rotateY(-90deg);
			transform-origin: left;
		}
		.container >img:nth-child(4){
			bottom: -200px;
			transform: rotateX(90deg);
			transform-origin:top;
		}
		.container >img:nth-child(5){
			top: -200px;
			transform: rotatex(-90deg);
			transform-origin: bottom;
		}
		.container >img:nth-child(6){
			
			transform: translateZ(200px);
		}
		.container :hover >img{
		        transform: translateX(200px) rotateY(90deg);
		    }
		    .container:hover > img:nth-child(1){
		        transform: translateZ(-200px) ;
		    }
		    .container:hover > img:nth-child(2){
		        transform: translateX(-200px) rotateY(90deg);
		    }
		    .container:hover > img:nth-child(3){
		        transform: translateX(200px) rotateY(-90deg);
		    }
		    .container:hover > img:nth-child(4){
		        transform: translateY(200px) rotateX(90deg);
		    }
		    .container:hover > img:nth-child(5){
		        transform: translateY(-200px) rotateX(-90deg);
		    }
		    .container:hover > img:nth-child(6){
		        transform: translateZ(400px) ;
		    }
	</style>
	<body>
		<div class="container">
		<img src="./img/1.png" alt="">
		<img src="./img/2.png" alt="">
		<img src="./img/3.png" alt="">
		<img src="./img/4.png" alt="">
		<img src="./img/5.png" alt="">
		<img src="./img/6.png" alt="">
		</div>
	</body>
</html>