如何⽤CSS3来实现卡⽚的翻转特效
CSS3实现翻转(Flip)效果
动画效果
效果分析
当⿏标滑过包含块时,元素整体翻转180度,以实现“正”“反”⾯的切换。
HTML分析
分析:.container,.flip为了实现动画效果做准备。.front,.back各包裹⼀张图⽚。
实现该效果的HTML如下:
<div class="container">
<div class="flip">
<div class="front">
<img src="images/pic00.jpg" alt="">
</div>
<div class="back">
<img src="images/pic01.jpg" alt="">
</div>
</div>
</div>
CSS分析
1. 元素布局
为了实现以上效果,先进⾏元素布局。给.front,.back相对.flip进⾏绝对定位,让他们在相同位置重叠。
布局部分代码如下:
.container,.front,.back{width:380px;height:270px;}
.flip{position:relative;}
.front,.back{position:absolute;top: 0px;left: 0px;}
设置之后我们发现.back的图⽚在.front的上⾯,因此给.front设置.fornt{z-index:2;}
注意:不要为了防⽌元素溢出设置overflow属性,这将导致3D效果⽆法实现。
:
The following CSS property values require the user agent to create a flattened representation of the descendant elements before they can be applied, and therefore force the used value of transform-style to flat:
overflow: any value other than visible.
opacity: any value less than 1.
filter: any value other than none.
clip: any value other than auto.
2. 动画效果的实现
注意点:
/*当为元素定义 perspective 属性时,其⼦元素会获得透视效果,⽽不是元素本⾝。*/
/*注释:perspective 属性只影响 3D 转换元素*/
/*⽬前浏览器都不⽀持 perspective 属性。
Chrome 和 Safari ⽀持替代的 -webkit-perspective 属性*/
(1) 为了实现动画效果⾸先给祖先元素.container,.flip设置以下属性,以触发3d效果和设置动画:
.container{perspective:1000;transform-style:preserve-3d;}
.flip{transition:0.6s;transform-style:preserve-3d;}
(2)接着,为了让图画翻转时不露出背⾯,给.front,.back设置backface-visibility属性:
.front,.back{backface-visibility:hidden;}
(3)为了让⿏标滑过包含块时,包含块翻转180度,以实现“正”“反”⾯的切换。给背⾯的元素设置transform:rotateY(-180deg),这时我们将⽆法看到.back。
css特效文字
(4)最后,当⽤户的⿏标滑过.container包含块时,.flip翻转180度,这样,.front翻转180度,由于背⾯是hidden,⽆法看见;⽽.back翻转180度后,回到0度,以正⾯⽰⼈,这样我们就能看到背⾯了。
代码如下:
.container{perspective:1000;transform-style:preserve-3d;}
.container,.front,.back{width:380px;height:270px;}
.flip{position:relative;transition:0.6s;transform-style:preserve-3d;}
.front,.back{position:absolute;top: 0px;left: 0px;backface-visibility:hidden;}
.front{z-index:2;}
./*⿏标还没放上去之前*//*这⾥先让back翻转180deg就看不到back的图⽚了*/
.back{transform:rotateY(-180deg);}
/*⿏标经过的时候 flip就翻转180deg 翻转的图⽚由于是背⾯就看不见*//*但由于.back先翻转了-180deg 所以当他再次rotateY(180deg)的时候他其实就是正⾯了即rotate(0)所以此时他能出现 */
.container:hover .flip{transform:rotateY(180deg);}
垂直翻转效果实现
垂直效果与⽔平翻转异曲同⼯。但是如果你只是把rotateY换成rotateX,那么你会发现图⽚是以顶部的那条线翻转的。
请注意:在上⾯的CSS代码中,我并未给.flip设置宽⾼,所以当给.flip应⽤transform:rotateY(180deg)时,按照默认的transform-origin值,是以元素的中⼼点为基本点翻转的。这⾥.flip的⾼度是0,所以当然是以顶部的那条线为基础翻转。所以解决的办法有⼆:
1. 给.flip设置和.front,.back相同的宽⾼。
2. 给.flip设置transform-origin:100% 135px/*⾼度的⼀半*/属性。
OK,这样你就会发现垂直翻转是你想要的效果了!
总结
1. 思路
(1)最外层元素设置perspective以实现3D效果。
(2)当⿏标滑过最外层元素时,第⼆包裹层翻转180度,同时设置过渡速度。
(3)两个翻转块绝对定位,以致实现相同位置的叠加。同时设置backface-visibility避免在实现动画效果时露出背⾯。
(4)给.front设置z-index属性使它在写代码和展⽰时都在前⾯。
(5)让.back最开始就翻转180度,以背⾯⽰⼈。
2. 遇到的问题:
(1)为了让两个尺⼨不⼀的图⽚在包裹块中⼤⼩⼀致,使⽤了overflow属性,⽆法实现3d效果。解决⽅法:给img设置width:100%;height:100%;
(2)没有意识到.flip的⾼度为0,所以在垂直翻转时标准点错误导致效果不⼀样。
(3)多写才能发现多的错误,才知道怎么错误,怎么解决错误。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论