一个纯CSS实现的卡片翻转效果

先上代码

<div id="box">
    <div class="front">正面</div>
    <div class="back">反面</div>
</div>

       #box{
            width:200px;
            height:200px;
            position:relative;
            perspective:500;
            -webkit-perspective:500;
        }
        #box div{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:.#fff;
            -webkit-perspective:10000;
            backface-visibility:hidden;
            -webkit-transition: all 2s;
            -moz-transition: all 2s;
            -ms-transition: all 2s;
            -o-transition: all 2s;
        }
        #box .front{
            background:#f00;
        }
        #box .back{
            background:#00f;
            -webkit-transform:rotateY(-180deg);
        }
        #box:hover .front{
            -webkit-transform:rotateY(-180deg);
        }
        #box:hover .back{
            -webkit-transform:rotateY(-360deg);
        }        

原理:这个卡片翻转效果是利用背面的内容一开始就先翻转180度,等正面翻转的时候背面再翻转360度,这样子背面翻转到面对屏幕的时候内容却是正的而不是反的

代码解析:

这里主要用到了CSS3的一些新的属性:perspective;

　　　　　　　　　　　　　　　　　　backface-visibility:hidden;

　　　　　　　　　　　　　　　　　　transition:all 2s;

　　　　　　　　　　　　　　　　　　transform:rotateY(Ndeg);

下面对这些属性进行详细的说明.

1.perspective:number|none(默认)

主要用来表示3D元素距离视图的距离,单位是像素,定义在父元素上,子元素就会获得透视效果,目前浏览器都在不支持,chrom和safari支持扩展的-webkit-perspectiv.

这个属性能查到的资料上基本上都是这么讲的,感觉不是很理解什么事透视效果,在我看来,使用这个属性就是在3D转换的时候能够看到立体的3D效果,可以配合perspective-origion来使用,可惜的是目前只有chrom和safari支持带有浏览器属性前缀的该属性.

2.backface-visibility:visiale|hidden

该属性用来定义当元素不面向屏幕的时候是否可见,可用来设置旋转元素是否希望用来看到背面.IE10+和Firefox支持该属性,Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性

3.transition:css属性名称 完成动画的时间 规定速度效果的速度曲线 定义过渡效果何时开始

transition是一个简写属性,用来设置四个属性:transition-property, transition-duration, transition-timing-function, transition-delay,一般为了省事直接就会写作transition:all 2s。过渡时间必须设置，否则不会产生过渡效果。IE10+,chrome,opera,Firefox支持transition属性,Safari支持替代的-webkit-transition属性

transition-timing-function:linear(匀速)|ease(默认.慢速开始,加快,慢速结束)|ease-in(慢速开始)|ease-out(慢速结束)|ease-in-out(慢速开始,慢速结束)|cubic-bezier(n,n,n,n)贝赛尔曲线

4.transform:rotateY(Ndeg)

兼容性不说那么多了,感觉反正用的时候全部加上浏览器前缀好啦.

主要是用来定义各种变换的,translate,scale,rotate,skew,可惜熟悉使用一下,用的还是比较多的