在学习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>
hover后会显示这个面的~
3227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
