正文
一个纯CSS实现的卡片翻转效果
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
先上代码
<div id="box">
<div class="front">正面</div>
<div class="back">反面</div>
</div>
#box{
width:200px;
height:200px;
position:relative;
perspective:;
-webkit-perspective:;
}
#box div{
position:absolute;
top:;
left:;
width:100%;
height:100%;
background:.#fff;
-webkit-perspective:;
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,可惜熟悉使用一下,用的还是比较多的
