css3 3D特效

最新推荐文章于 2019-04-23 22:02:31 发布

仰望星空的包子

最新推荐文章于 2019-04-23 22:02:31 发布

阅读量341

点赞数

分类专栏： css3学习

本文链接：https://blog.csdn.net/sinat_21206105/article/details/53834913

版权

css3学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在学习css3的时候，发现最难得应该是这个3d特效啊，整了我好久都没搞清楚这其中的设置是如何弄得~是我想象力不行呢还是咋呢~接下来传上我写的代码，希望大家帮我分析分析为何要这样设置样式~

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>translateZ用法</title>
	<style type="text/css">
		*{margin:0;padding:0;}
		.light{margin-top: 200px;margin-left:200px;width:310px;height: 100px;position: absolute; perspective: 500px;}
		.stage{
			position: relative; width: 310px;height: 100px;transform-style:preserve-3d; transition:all 0.8s;
		}
		img{transition: all 0.8s;width: 310px;height: 100px;position: absolute;}
		.im1{transform: translateZ(50px);}
			.im2{transform: rotateX(-90deg) translateZ(50px);}
			.stage:hover{transform:rotateX(90deg);}
	</style>
</head>
<body>
	
	<div class="light">
		<div class="stage">
			<img src="images/D_01.jpg" alt="" class="im1">
			<img src="images/D_02.jpg" alt="" class="im2">
		</div>
	</div>
</body>
</html>