backflip是什么意思kflip在线翻译读音例

flip:纸牌的外框

front:表⽰位于前⾯的纸牌

back:表⽰位于后⾯的纸牌

number*:表⽰纸牌上的数字

的css代码：

.flip{

display:inline-block;

position:relative;

width:60px;

height:100px;

line-height:100px;

border:solid1px#000000;

border-radius:10px;

background:#ffffff;

font-size:66px;

color:#ffffff;

text-align:center;

font-family:\'FranklinGothicMedium\',\'ArialNarrow\',Arial,sans-serif;

box-shadow:0002pxrgba(0,0,0,.2);

}

为什么底层设置background为⽩⾊？

答案很简单，元素内部的纸⽚边⾓和外层边⾓之间会有⼀点点的缝隙，这个缝隙会露出底部的⽩⾊，从视觉效果上看，更加具有⽴体感。

基本结构效果：

1.2.构造纸牌并⽤伪元素拆分为两部分

由于每个纸牌是上下对折、翻转的，所以每个纸牌要拆分成上下两部分。可是HTML中每个纸牌只有⼀个标签，怎么拆分成两个呢？这⾥就

⽤到了before和after伪元素。

.l::before,

.l::after{

content:\"\";

position:absolute;

left:0;

right:0;

background:#000000;

overflow:hidden;

}

/*上半页*/

.l::before{

top:0;

bottom:50%;

border-radius:10px10px00;

box-sizing:border-box;//保证了下边框不会影响元素的原有⾼度

border-bottom:solid1px#666666;//为上下两部分添加⽔平线

}

/*下半页*/

.l::after{

top:50%;

bottom:0;

border-radius:0010px10px;

/*1、line-height:0的妙⽤*/

line-height:0;

}

:before和:after在digital内部⽣成了两个伪元素，其中，before⽤来⽣成纸牌的“上半张”，after⽤来⽣成纸牌的“下半张”。

因此，before“上半张”为从“顶部（top:0）”到“距底⼀半(bottom:50%)”的部分，顶部两侧为圆⾓。

同理，after“下半张”为“距顶⼀半（top:50%）”到“底部（bottom:0）”的部分，底部两侧为圆⾓。

注意代码中的content:\"\"不能省略，否则伪元素是不显⽰的。

效果如下：

到这⾥，我们可以认为是4个⼩纸⽚，分别是：

前上：.:before

前下：.:after

后上：.:before

后下：.:after

1.3.为纸牌添加⽂字

.0::before,

.0::after{

content:\"0\";

}

.1::before,

.1::after{

content:\"1\";

}

.2::before,文天祥传文言文翻译

.2::after{

content:\"2\";

}

.3::before,

.3::after{

content:\"3\";

}

.4::before,

.4::after{

content:\"4\";

}

.5::before,

.5::after{

content:\"5\";只在此山中云深不知处的意思

}

.6::before,

.6::after{

content:\"6\";

}

.7::before,

.7::after{

content:\"7\";

}

.8::before,

.8::after{

content:\"8\";

}

.9::before,

.9::after{

content:\"9\";

}

效果：

可以很明显的看到两个问题：

1.本应该在后⾯的back纸牌跑到了前⾯(z-index问题)

2.下半张纸牌的⽂字应该只显⽰下半部分。

问题⼆解决办法：

使⽤line-hight:0

/*下半页*/

.l::after秋风辞歌曲 {

top:50%;

bottom:0;

border-radius:0010px10px;

/*1、line-height:0的妙⽤*/

line-height:0;

}

利⽤line-height:0的特性，就可以很轻易实现“下半张”纸牌只显⽰⽂字的下半部分，并且与“上半张”纸牌很好的衔接在⼀起。

问题⼀解决办法：

/*向下翻*/

/*把后⾯纸牌的下半部翻转上去*/

.::before{

z-index:3;

}

.::after{

z-index:2;

}

.::after,

.::before{

z-index:1;

}

出现此情况的因为是我们只设置了层级，但是没有把后⾯纸牌的下半部翻转上去

.::after{

z-index:2;

transform-origin:50%0%;

transform:perspective(160px)rotate(180deg);

}

1.4.讲解transform-origin和perspective

transform-origin是元素旋转的基本点。

transform-origin:50%0%;表⽰将旋转基本点设置在横轴的中点，纵轴的顶点位置

perspective(160px)可以理解为⽴体透视图的景深

这样就可以正常显⽰了：

ce-visibility

因为前排上半部纸七手八脚的意思 ⽚的z-index最⾼，所以它在翻转到下半部的时候仍然遮挡住了其他纸⽚。

backface-visibility表⽰元素的背⾯是否可见，默认为visible（可见）。

这⾥的需求是，牛郎织女的故事缩写 当前⾯上半部纸⽚翻转到⼀半的时候（90度）进⼊不可见状态。⽽纸牌翻转90度以后，正好是显露元素背⾯的开始，所以

将backface-visibility设置为hidden即可完美解决！

/*翻转动画*/

/*但是前排上半部纸⽚的z-index最⾼，所以它在翻转到下半部的时候仍然遮挡住了其他纸⽚*/

/*解决办法：backface-visibility表⽰元素的背⾯是否可见*/

.::before{

transform-origin:50%100%;

animation:frontFlipDown0.6sease-in-outboth;

box-shadow:002px6pxrgba(255,255,255,.3);

backface-visibility:hidden;

}

.::after{

animation:backFlipDown0.6sease-in-outboth;

}

@keyframesfrontFlipDown{

0%{

transform:perspective(160px)rotateX(0deg);

}

100%{

transform:perspective(160px)rotateX(-180deg);

}

}

@keyframesbackFlipDown{

0%{

transform:perspective(160px)rotateX(180deg);

}

100%{

transform:perspective(160px)rotateX(0deg);

}

}

交互

//timer时钟部分：

vartimer=functiontimer(){

functionFlipper(config){

//默认配置

={

//时钟模块的节点

node:null,

//初始前牌⽂字

frontText:\'number0\',

//初始后牌⽂字

backText:\'number1\',

//翻转动画时间（毫秒，与翻转动画CSS设置的animation-duration时间要⼀致）

duration:600

}

//节点的原本class，与html对应，⽅便后⾯添加/删除新的

ass={

flip:\'flip\',

front:\'digitalfront\',

back:\'digitalback\'

}

//覆盖默认配置浅拷贝

(,config)

//定位前后两个牌的DOM节点

ode=elector(\'.front\')

de=elector(\'.back\')

//是否处于翻牌动画过程中（防⽌动画未完成就进⼊下⼀次翻牌）

ping=false

//初始化

this._init()

}

ype={

constructor:Flipper,

//初始化

_init:function(){

//设置初始牌⾯字符

this._setFront(ext)

this._setBack(xt)

},

//设置前牌⽂字

_setFront:function(className){

ribute(\'class\',+\'\'+className)

},

//设置后牌⽂字

_setBack:function(className){

ribute(\'class\',+\'\'+className)

},

_flip:function(type,front,back){

//如果处于翻转中，则不执⾏

if(ping){returnfalse}

//设置翻转状态为true

ping=true

//设置前牌⽂字

this._setFront(front)

//设置后牌⽂字

this._setBack(back)

//根据传递过来的type设置翻转⽅向

letflipClass=;

if(type===\'down\'){

flipClass+=\'down\'

}else{

flipClass+=\'up\'

}

//添加翻转⽅向和执⾏动画的class，执⾏翻转动画

ribute(\'class\',flipClass+\'go\')

ribute(\'class\',flipClass+\'go\')

//根据设置的动画时开头的成语 间，在动画结束后，还原class并更新前牌⽂字

setTimeout(()=>{

//还原class

ribute(\'class\',flipClass)

//设置翻转状态为false

ping=false

//将前牌⽂字设置为当前新的数字，后牌因为被前牌挡住了，就不⽤设置了。

this._setFront(back)

},on)

},

//下翻牌

flipDown:function(front,back){

this._flip(\'down\',front,back)

},

//上翻牌

flipUp:function(front,back){

this._flip(\'up\',front,back)

}

}

//定位时钟模块

letclock=mentById(\'clock\');

//定位6个翻板

letflips=electorAll(\'.flip\');

//获取当前时间

letnow=newDate()

//格式化当前时间，例如现在是18:18:12，则输出\"181812\"字符串

letnowTimeStr=formatDate(now,\'hhiiss\')

//(\"nowTimeStr:\"+nowTimeStr);

//格式化下⼀秒的时间

letnextTimeStr=formatDate(newDate(e()+1000),\'hhiiss\')

//定义牌板数组，⽤来存储6个Flipper翻板对象

letflipObjs=[]

for(leti=0;i<;i++){

//创建6个Flipper实例，初始化并存⼊flipObjs

(newFlipper({

//每个Flipper实例按数组顺序与翻板物是人非事事非下一句 DOM的顺序⼀⼀对应

node:flips[i],

//按数组顺序取时间字符串对应位置的数字

frontText:\'number\'+nowTimeStr[i],

backText:\'number\'+nextTimeStr[i]

}))

}

//正则格式化⽇期

functionformatDate(date,dateFormat){

/*单独格式化年份，根据y的字符数量输出年份

例如：yyyy=>2019

yy=>19

y=>9

*/

if(/(y+)/.test(dateFormat)){

dateFormat=e(RegExp.$1,(lYear()+\'\').substr(4-RegExp.$));

}

//(\"RegExp\"+RegExp);

//(\"RegExp.$1\"+RegExp.$1);

//格式化⽉、⽇、时、分、秒

leto={

\'m+\':th()+1,

\'d+\':e(),

\'h+\':rs(),

\'i+\':utes(),

\'s+\':onds()

};

for(letkino){

if(newRegExp(`(${k})`).test(dateFormat)){

//(\"`(${k})`--\"+`(${k})`);

//(\"`(${k})`--\"+`(${k})`);

//取出对应的值

letstr=o[k]+\'\';

/*根据设置的格式，输出对应的字符

例如:早上8时，hh=>08，h=>8

但是，当数字>=10时，⽆论格式为⼀位还是多位，不做截取，这是与年份格式化不⼀致的地⽅

例如:下午15时，hh=>15,h=>15

*/

dateFormat=e(RegExp.$1,(RegExp.$===1)?str:padLeftZero(str));

}

}returndateFormat;

};

//⽇期时间补零

functionpadLeftZero(str){

return(\'00\'+str).substr();

}

setInterval(function(){

//获取当前时间

letnow=newDate()

//格式化当前时间

letnowTimeStr=formatDate(newDate(e()-1000),\'hhiiss\')

//格式化下⼀秒时间

letnextTimeStr=formatDate(now,\'hhiiss\')

//将当前时间和下⼀秒时间逐位对⽐

for(leti=0;i<;i++){

//如果前后数字没有变化，则直接跳过，不翻牌

if(nowTimeStr[i]===nextTimeStr[i]){continue}

//传递前后牌的数字，进⾏向下翻牌动画

flipObjs[i].flipDown(\'number\'+nowTimeStr[i],\'number\'+nextTimeStr[i])

}

},1000)

}

最终版实例：

想要源码的点这⾥哦：