這篇文章將為大家詳細(xì)講解有關(guān)css3翻牌翻數(shù)字效果怎么實(shí)現(xiàn)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括訥河網(wǎng)站建設(shè)、訥河網(wǎng)站制作、訥河網(wǎng)頁制作以及訥河網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，訥河網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到訥河省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

效果圖如下：

沒有具體說做什么效果，但是想著純數(shù)字轉(zhuǎn)換太簡(jiǎn)單了，然后就順手做了一個(gè)翻牌的效果。

效果預(yù)覽，新窗口打開：https://codepen.io/andy-js/pen/ExaGxaL

首先做一些頁面布局：

 body{background: #000;}
     ul{
         list-style: none;
         margin:100px 0;
         display: flex;
         justify-content:center;
         line-height: 56px;
         height:56px;
         font-size: 39.6px;
         color: #FFFFFF;
         transform-style:preserve-3d;
         perspective:1000px;
     }
     li{
        height:56px;
        margin:0 10px;
        background:none;
        width:16px;
        position: relative;
     }
     .num{
        width:46px;
        transform-style:preserve-3d;
        perspective:1000px;
        transform:rotateY(0deg);
        transition: 1s all ease;
    }
    p{
        height:56px;
        width:46px;
        text-align: center;
        background: #EC2C5C;
        border-radius: 2.57px;
        position: absolute;
    }
    
    p:nth-child(2){
        transform: scalex(-1) translateZ(-1px);
    }

然后通過動(dòng)態(tài)插入，模擬了這么一個(gè)效果
利用了transition來做的動(dòng)畫
利用transform:rotateY來做的翻轉(zhuǎn)
在翻轉(zhuǎn)之前先將另一個(gè)數(shù)字scalex左右鏡像之后translateZ(-1px)移動(dòng)到另一個(gè)數(shù)字的后面，這樣翻轉(zhuǎn)過來就能看到鏡像的數(shù)字
不是很完善，還有很多可以改進(jìn)的地方
全部代碼如下：

關(guān)于“css3翻牌翻數(shù)字效果怎么實(shí)現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

本文題目：css3翻牌翻數(shù)字效果怎么實(shí)現(xiàn)-創(chuàng)新互聯(lián)
文章出自：http://weahome.cn/article/ceiddd.html