css3动画3D旋转案例

最新推荐文章于 2023-01-03 09:31:17 发布

lucky_girl_girl

最新推荐文章于 2023-01-03 09:31:17 发布

阅读量555

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/lucky_girl_girl/article/details/104160776

版权

1.transform-style:preserve-3d：让子元素在3d空间能占据位置
2.perspective:800px：定位视角，一般800px

在这里插入代码片
<html>
<style>
	body{
		perspective:800px;
	}
	.stage{
		position:relative;
		width:200px;
		height:200px;
		margin:100px auto;
		border:1px solid red;
		transform-style:preserve-3d;
		transition:2s;
	}
	.face{
		position:absolute;
		width:200px;
		height:200px;
		border:1px solid #000;
		transition:2s;
	}
	/* qian */
	.face1{
		transform:translateZ(100px);
	}
	/* 后 */
	.face2{
		transform:rotateY(180deg) translateZ(100px); 
	}

	/* 左边 */
	.face3{
		transform:rotateY(-90deg) translateZ(100px); 
	}

	/* 右边 */
	.face4{
		transform:rotateY(90deg) translateZ(100px); 
	
	}
	.stage:hover{
		transform:rotateY(-180deg);
	}
	//qian
	.stage:hover .face1{
		transform:translateZ(200px);
	}
	/* 后 */
	.stage:hover .face2{
		transform:rotateY(180deg) translateZ(200px); 

	}
	/* 左边 */
	.stage:hover .face3{
		transform:rotateY(-90deg) translateZ(200px); 
	}

	/* 右边 */
	.stage:hover .face4{
		transform:rotateY(90deg) translateZ(200px); 
	}
	img{
		width:200px;
		height:200px;
	}
</style>
<body>
	<div class="stage">
		<div class="face face1"><img src="image/1.jpg"/></div>
		<div class="face face2"><img src="image/1.jpg"/></div>
		<div class="face face3"><img src="image/1.jpg"/></div>
		<div class="face face4"><img src="image/1.jpg"/></div>
	</div>
</body>
</html>