css3实现卡片翻转 · Issue #32 · JerryWang1996/jerrywangBlog

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

潇洒的皮带 · 如何引用 google ...· 20 小时前 ·

憨厚的咖啡豆 · 如何用windows10以太网开热点?_百度知道· 11 月前 ·

高大的毛衣 · setTimeout()和setInterv ...· 11 月前 ·

高大的荔枝 · AddTransient、AddSingle ...· 1 年前 ·

酷酷的松鼠 · 如何设置复选框Checkbox_移动开发平台 ...· 1 年前 ·

玩手机的啄木鸟 · 水浒传中武大郎的死亡背后，藏着好朋友郓哥多个 ...· 1 年前 ·

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account 正反面颜色不同，正面时显示 "我是正面" ，反面时，显示 "我是反面" < div class = "card" > < div class = "card-text card-front" > 我是正面 < / div > < div class = "card-text card-back" > 我是反面 < / div> < / div >

昨晚pdd面试中涉及了一道css3的3d翻转问题，恰巧没有接触过，所以之后就查了一番资料，理解了一下怎么实现，说下基本思路：

首先将内部的正反面设置


     backface-visibility: hidden;

，意为设置该属性的元素翻转180°的时候变为不可见

然后设置


     transform: rotateY(-180deg)

将反面翻转180°处理，让其一开始不可见

然后写一个hover伪类，当鼠标悬停的时候将正反面都做180°翻转即可显示反面，而此时正面是翻转180°的此时不可见，然后设置旋转时间


     transition:1s

为了更加立体还可以使用


     perspective

属性进行透视

demo如下：

< meta charset =" utf-8 " > < meta name =" viewport " content =" width=device-width " > < title > 卡片翻转 </ title > < style > /* perspective rotateY backface-visibility*/ . card { perspective : 500 px ; width : 150 px ; height : 200 px ; margin : 50 px auto; position : relative; . card-text { backface-visibility : hidden; width : 100 % ; height : 100 % ; transition : 1 s ; position : absolute; top : 0 ; left : 0 ; . card-front { background-color : lightseagreen; . card-back { background-color : lightcoral; transform : rotateY ( -180 deg ); . card : hover . card-front { transform : rotateY ( 180 deg ); . card : hover . card-back { transform : rotateY ( 0 deg ); </ style > </ head > < div class =" card " > < div class =" card-text card-front " > 我是正面 </ div > < div class =" card-text card-back " > 我是反面 </ div > </ div > </ body > </ html >