css3之3D翻牌效果

时间 2019-11-19

标签 css3 css 3d 翻牌效果栏目 CSS 繁體版

原文原文链接

最近一直在学css3，发现他真的是愈来愈牛逼。如今的css3已经不在是之前的css了，它能作出的功能效果是咱们无法想象的了。它能够实现flash，能够制做一些js能作出来的效果,还能够写出ps作出来的一些渐变啊圆角啊阴影啊什么的效果，如此之炫的它，我相信已经有不少人对它作了更深的研究了吧，哈哈，今天我也在小小的研究了下它，主要是关于它的一些3d效果，对于3d本人一直都不是不清不楚的，今天有时间就恰好好好学习下，~~~javascript

所谓的3d翻牌效果，其实就是两张图片，一张在前，一张在后，当前面的那张发生旋转后，转到必定角度时后面的图片就会跟着它的步伐一块儿旋转，只是一个旋转到看不见，而一个刚要转的咱们看的见。是否是很心急，那就快来跟我一块儿学习吧，哈哈~@@@css

首先，咱们在html中有这样一个布局：html

<div class="outer">
<div class="div1"></div>
<div class="div2"></div>
</div>java

不要小看外面那个div，它但是本次内容不可少的呢，没了它，后面的效果就无法实现了呢!局布好了，接下来就要开始搞样式了。最早要搞的确定是外面的哈，给它一个width,height,大少各位大神本身定吧，小妹我这就先给它定个200*200吧。外面的搞定了，里面的也要开始了，这里都是给200*200。此时在浏览器中一看发现div1和div2是上下显示的，一个上一个下，这就对了，要知道div是块元素，它要占据一整行的呢，但这对咱们以前说的先后确定是有矛盾的，不要急，给它一个绝对定位position: absolute;这样两个div的中心就重合啦。为了区别两个div,这里咱们要分别给它们不同的背景色。前期准备工做都差不搞定了，接下来咱们来看看怎么样实现效果吧！jquery

咱们是要实现翻牌效果，一听就知道确定是要有旋转的，这就要用到css3里的新属性transform:rotateY(?deg);有人有可能会问为何是rotateY呢，这你就不知道了吧，翻牌，固然是沿着Y轴转啊，哈哈！因此当鼠标移到div上时咱们就要让它实现旋转效果，那么此时外层div的用处就来啦，无论用哪一个小div都没法让它们同时发生旋转，除非咱们的鼠标是点在外面那个div上，因而就有这个代码了，css3

.outer:hover .div1{
            transform:rotateY(-180deg);
        }
        .outer:hover .div2{
            transform:rotateY(0deg);
        }浏览器

旋转是有了，但是没有任何过渡效果的旋转看起来是很难看的，因此在这里，咱们要给它们一个过渡效果，就要用到css3里的新属性transition:all 2s;此处的all是它全部的效果都过渡。讲到这里咱们其实一直都没处理一件事，那就是怎么让当前面的旋转到后面，后面的紧跟其后出现，这就是backface-visibility:hidden;一个在图片变换里很重要的一个属性，它的意思是当图片转到显示屏看不见的地方就消失了。就是说原本是正面的，咱们能看么到，可是当它沿着Y轴转180度后咱们就不能看到它了，若是不加这个属性咱们是能看到旋转后的反图片的，加了它就看不到了。因此咱们要把这个属性加到两个小div上。并且为了实现此效果，咱们在开始的时候还得让两个小div一个没有旋转，咱们能看到，另外一个也就是在背后的那个放转180度，这样当第一个div 开始旋转后咱们就不会当即看到第二个div，而是等它旋转到看不到的地方，第二个div 才会出现。具体代码以下所示：布局

<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 div{
            width:510px;
            height: 340px;
            position: absolute;
            transform-style: preserve-3d;
            backface-visibility:hidden;
            transition:all 2s;

        }
        .div1{
            background: url("images/1.jpg");
            transform:rotateY(0);
        }
        .div2{
            background: url("images/2.jpg") no-repeat;
            transform:rotateY(-180deg);
        }
        .outer:hover .div1{
            transform:rotateY(-180deg);
        }
        .outer:hover .div2{
            transform:rotateY(0deg);
        }
    </style>
</head>

<body>
<div class="outer">
    <div class="div1"></div>
    <div class="div2"></div>
</div>
</body>

</html>