看起来很炫是不是，这个其实的制作原理就是按照我在上面提到的这些属性去制作的，首先我们分析一下，在创建这个的时候，第一步我们要引入光源，然后是添加一个3D的舞台，接着是把带猴子的图片放在垃圾桶图片的下面并且边缘相接，最后在这些图片的父类定义一个动画，就是在鼠标悬停的时候出发的动作，这样这个就制作完成了，对了在这个例子中图片的尺寸最好要相同(里面这些图是博主在网上找的)
具体的HTML代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3练习案例</title>
</head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.light{
margin-top:200px;
margin-left: 200px;
width:310px;
height:100px;
position:absolute;
perspective:500px;
}
.light .stage{
position:relative;
width:310px;
height:100px;
transform-style:preserve-3d;
-webkit-transition: all 0.8s;
}
.light .stage .image1{
width:310px;
height:100px;
position:absolute;
-webkit-transform:translateZ(50px) ;
-webkit-transition: all 0.8s;
}
.light .stage .image2{
width:310px;
height:100px;
position:absolute;
-webkit-transition: all 0.8s;
-webkit-transform: rotateX(-90deg) translateZ(50px);
}
.light .stage:hover{
-webkit-transform: rotateX(90deg);
}
</style>
<body>
<div class="light">
<div class="stage">
<img class="image1" src="images/a.png" />
<img class="image2" src="images/b.jpeg" />
</div>
</div>
</body>
</html>图片我就不提供了，请自行百度上找
五、总结
