实例详解css3特效之3D翻牌效果
- WBOY转载
- 2016-05-16 12:03:255319浏览
这篇文章主要介绍了css3特效之3D翻牌效果，有一定 的参考价值，感兴趣的小伙伴可以参考一下，希望对你有所帮助！
最近一直在学css3，发现他真的是越来越牛逼。现在的css3已经不在是以前的css了，它能做出的功能效果是我们没法想象的了。它可以实现flash，可以制作一些js能做出来的效果,还可以写出ps做出来的一些渐变啊圆角啊阴影啊什么的效果，如此之炫的它，我相信已经有很多人对它做了更深的研究了吧，哈哈，今天我也在小小的研究了下它，主要是关于它的一些3d效果，对于3d本人一直都不是不清不楚的，今天有时间就刚好好好学习下。
所谓的3d翻牌效果，其实就是两张图片，一张在前，一张在后，当前面的那张发生旋转后，转到一定角度时后面的图片就会跟着它的步伐一起旋转，只是一个旋转到看不见，而一个刚要转的我们看的见。是不是很心急，那就快来跟我一起学习吧，哈哈~@@@
首先，我们在html中有这样一个布局：
<p class="outer">
<p class="p1"></p>
<p class="p2"></p>
</p>不要小看外面那个p，它可是本次内容不可少的呢，没了它，后面的效果就没法实现了呢!局布好了，接下来就要开始搞样式了。最先要搞的肯定是外面的哈，给它一个width,height,大少各位大神自己定吧，小妹我这就先给它定个200*200吧。外面的搞定了，里面的也要开始了，这里都是给200*200。此时在浏览器中一看发现p1和p2是上下显示的，一个上一个下，这就对了，要知道p是块元素，它要占据一整行的呢，但这对我们之前说的前后肯定是有矛盾的，不要急，给它一个绝对定位position: absolute;这样两个p的中心就重合啦。为了区别两个p,这里我们要分别给它们不一样的背景色。前期准备工作都差不搞定了，接下来我们来看看怎么样实现效果吧！
我们是要实现翻牌效果，一听就知道肯定是要有旋转的，这就要用到css3里的新属性transform:rotateY(?deg);有人有可能会问为什么是rotateY呢，这你就不知道了吧，翻牌，当然是沿着Y轴转啊，哈哈！所以当鼠标移到p上时我们就要让它实现旋转效果，那么此时外层p的用处就来啦，不管用哪个小p都无法让它们同时发生旋转，除非我们的鼠标是点在外面那个p上，于是就有这个代码了，
.outer:hover .p1{
transform:rotateY(-180deg);
}
.outer:hover .p2{
transform:rotateY(0deg);
}旋转是有了，可是没有任何过渡效果的旋转看起来是很难看的，所以在这里，我们要给它们一个过渡效果，就要用到css3里的新属性transition:all 2s;此处的all是它所有的效果都过渡。讲到这里我们其实一直都没处理一件事，那就是怎么让当前面的旋转到后面，后面的紧跟其后出现， 这就是backface-visibility:hidden;一个在图片变换里很重要的一个属性，它的意思是当图片转到显示屏看不见的地方就消失了。就是说本来是正面的， 我们能看么到，但是当它沿着Y轴转180度后我们就不能看到它了，如果不加这个属性我们是能看到旋转后的反图片的，加了它就看不到了。所以我们要把这个属性加到两个小p上。而且为了实现此效果，我们在开始的时候还得让两个小p一个没有旋转，我们能看到，另一个也就是在背后的那个放转180度，这样当第一个p 开始旋转后我们就不会立即看到第二个p，而是等它旋转到看不到的地方，第二个p 才会出现。具体代码如下所示：
<html><head>
<title>3D翻牌效果 </title>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
.outer{
width: 510px;
height: 340px;
border: 1px red solid;
margin: 0 auto;
}
.outer p{
width:510px;
height: 340px;
position: absolute;
transform-style: preserve-3d;
backface-visibility:hidden;
transition:all 2s;
}
.p1{
background: url("images/1.jpg");
transform:rotateY(0);
}
.p2{
background: url("images/2.jpg") no-repeat;
transform:rotateY(-180deg);
}
.outer:hover .p1{
transform:rotateY(-180deg);
}
.outer:hover .p2{
transform:rotateY(0deg);
}
</style></head><body><p class="outer">
<p class="p1"></p>
<p class="p2"></p></p></body></html>以上就是这篇文章的主要内容，希望能够帮助到大家。
【相关教程推荐】
1. CSS视频教程
2. CSS在线手册
3. bootstrap教程