詳解如何用 CSS3 完成 3D transform變換

Tips:閱讀提示!W烦佟脆荷!

  1. 首先,本文針對(duì)的是3D transform變換的學(xué)習(xí)集晚,所以你需要對(duì) 2D transform變換 有一定的了解
  2. 其次窗悯,需要說(shuō)明的是,代碼是一種需要自己不斷實(shí)踐的學(xué)科偷拔,建議各位在開始學(xué)習(xí)本篇文檔的時(shí)候蒋院,先創(chuàng)建一個(gè)html頁(yè)面來(lái)邊讀邊練,
    相信這樣擂红,一定會(huì)給你留下一個(gè)非常直觀且深刻的印象翠勉!

本文練習(xí)一些公共代碼

鑒于本文貼了不少代碼來(lái)演示督赤,所有這里提前放一個(gè)所有演示的公共代碼片段

    // 公共DOM元素,后續(xù)均為此寫樣式表
    // 舞臺(tái)容器
    <div class="stage">
        // 變換元素
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    
    // 樣式兼容的各個(gè)瀏覽器屬性頭辞友,有需要的在各自代碼中添加  
    // 下列測(cè)試代碼使用Chorme運(yùn)行  
    -webkit-  /* Safari 和 Chrome */
    -ms-      /* IE */
    -moz-     /* Firefox */
    -o-      /* Opera */

實(shí)現(xiàn)3D變換的基礎(chǔ) -- 透視(perspective)

當(dāng)我們步入CSS3動(dòng)畫殿堂之時(shí),我們一般都會(huì)從一些簡(jiǎn)單動(dòng)的東西開始學(xué)習(xí)震肮,比如元素的位移称龙,旋轉(zhuǎn),放大縮小之類的2D transform變換戳晌,
那么如何在一個(gè)2D的屏幕上實(shí)現(xiàn)3D的變換呢鲫尊,這里我們就先需要有一個(gè)概念,就是 透視

從一個(gè)最簡(jiǎn)單的 透視 說(shuō)起沦偎,我們小時(shí)候的數(shù)學(xué)課上疫向,數(shù)學(xué)老師一定會(huì)給我們畫一個(gè)立體正方形,能夠在2D平面上看出3D效果就是 透視 的作用

用一張直觀的圖片來(lái)說(shuō)明一下

透視正方體

透視的類型有以下幾種

透視類型

那么在CSS3中如何用代碼實(shí)現(xiàn)透視呢豪嚎?

  1. 主要是通過(guò)perspective屬性來(lái)實(shí)現(xiàn)定義透視距離
  2. perspective屬性定義3D元素距視圖的距離鸿捧,以像素計(jì),該屬性允許您改變3D元素查看3D元素的視圖
  3. 透視距離可以這么理解疙渣,如果你的顯示器寬度是1920px的分辨率匙奴,那么2000px的透視距離就近似于,從顯示器平面開始妄荔,一個(gè)顯示器寬度的距離
  4. 默認(rèn)值是0px泼菌,可以理解為初始位置
  5. 注意!@沧狻哗伯!當(dāng)為元素定義 perspective 屬性時(shí),其子元素會(huì)獲得透視效果篷角,而不是元素本身
  6. 它有兩種寫法焊刹,單個(gè)元素時(shí)候看似效果相同,但是多元素在同一個(gè)舞臺(tái)上呈現(xiàn)時(shí),就會(huì)出現(xiàn)問(wèn)題了
    • 第一種虐块,是寫在舞臺(tái)元素上俩滥,定義perspective屬性
    • 第二種,是配合transform屬性一起贺奠,例如:transform: perspective(600px) rotateY(45deg)
    • 參考下方示例霜旧,您可以在自己的demo中測(cè)試效果區(qū)別,你會(huì)發(fā)現(xiàn)第二種所有元素都是同一角度的旋轉(zhuǎn)儡率,
      這是因?yàn)榈谝环N透視點(diǎn)是.stage中央挂据,第二種透視點(diǎn)是每一個(gè).box中央
    // 第一種寫法
    .stage {
        width: 100%;
        height: 100%;
        perspective: 1000px;
        -webkit-perspective: 500px;
    }
    .stage .box {
        width: 100px;
        height: 100px;
        margin: 100px 100px;
        background-color: #55ffff;
        display: inline-block;
        transform: rotateY(65deg);
        -webkit-transform: rotateY(65deg);
    }
    
    // 第二種寫法
    .stage {
        width: 100%;
        height: 100%;
    }
    .stage .box {
        width: 100px;
        height: 100px;
        margin: 100px 100px;
        background-color: #55ffff;
        display: inline-block;
        transform: perspective(1000px) rotateY(65deg);
        -webkit-transform: perspective(1000px) rotateY(65deg);
    }

透視基點(diǎn)位置屬性(perspective-origin)

  1. 既然我我們有透視距離的概念,那么這個(gè)透視基點(diǎn)的意思就是儿普,我們所看的舞臺(tái)或者元素的中心
  2. perspective(透視)屬性必須和perspective-origin(透視基點(diǎn))屬性一同使用
  3. perspective-origin: x-axis y-axis崎逃,xy可以分別是這些值:
    • left
    • right
    • center
    • length,像素
    • %眉孩,百分比
  4. 舉個(gè)不恰當(dāng)?shù)睦踊橥眩敢暬c(diǎn)類似看足球比賽中那個(gè)球的位置,因?yàn)樗腥搜鄱紩?huì)盯著場(chǎng)上的足球勺像,你和球的距離理解為透視距離就好障贸,當(dāng)然這并不恰當(dāng),不要在意
  5. 該屬性必須與perspective屬性一同使用吟宦,而且只影響3D轉(zhuǎn)換元素篮洁,它可以定義在元素中,并且同perspective屬性一樣殃姓,定義在哪里影響哪里
  6. 默認(rèn)值是50% 50%袁波,表示 xy 中心位置
  7. 下面我們利用一個(gè)示例來(lái)看看,你依舊可以通過(guò)修改demo中的參數(shù)蜗侈,看到效果的變化
    // 50% 50% 正好是變換元素的中心點(diǎn)篷牌,也是默認(rèn)值  
    .stage {
        width: 100%;
        height: 100%;
        perspective: 604px;
        -webkit-perspective: 604px;
        // 使用百分比
        perspective-origin: 50% 50%;
        -webkit-perspective-origin: 50% 50%;
        // 使用像素
        // perspective-origin: 200px 100px;
        // -webkit-perspective-origin: 200px 100px;
        // 使用位置
        // perspective-origin: left center;
        // -webkit-perspective-origin: left center;
        // 也可以混用
        // perspective-origin: 200px 10%;
        // -webkit-perspective-origin: 200px 10%;
    }
    .stage .box {
        width: 100px;
        height: 100px;
        margin: 100px 100px;
        background-color: #55ffff;
        display: inline-block;
        transform: rotateY(65deg);
        -webkit-transform: rotateY(65deg);
    }

透視盲區(qū)

在我們進(jìn)行3D變換的時(shí)候還會(huì)遇到透視盲區(qū)的問(wèn)題,比如一個(gè)正方形踏幻,旋轉(zhuǎn)45°之后枷颊,正好和你的視線完全平行,那么這個(gè)面你就看不到该面,這就是視覺(jué)盲區(qū)
你可以利用下方代碼在自己的demo中查看一下效果

    // 我的電腦分辨率是`1920*1080`夭苗,透視距離是`604px`
    // 如果你看不到效果,可以嘗試修改旋轉(zhuǎn)角度或透視距離隔缀,找一下出現(xiàn)盲區(qū)的角度  
    .stage {
        width: 100%;
        height: 100%;
        perspective: 604px;
        -webkit-perspective: 604px
    }
    
    .stage .box {
        width: 100px;
        height: 100px;
        margin: 100px 100px;
        background-color: #55ffff;
        display: inline-block;
        transform: rotateY(65deg);
        -webkit-transform: rotateY(65deg);
    }

實(shí)現(xiàn)靜態(tài)的3D變換 -- 轉(zhuǎn)換(transform)

相信在2D變換的學(xué)習(xí)中對(duì)于transform屬性一定不陌生了题造,它不僅可以進(jìn)行2D變換,也可以進(jìn)行3D變換猾瘸,只不過(guò)需要借助上一個(gè)透視的屬性界赔,我們才可以在屏幕中看到變換的效果

先來(lái)說(shuō)明一個(gè)三維坐標(biāo)系的概念丢习,通俗點(diǎn)來(lái)說(shuō),z軸對(duì)應(yīng)垂直方向淮悼,x軸對(duì)應(yīng)前后方向咐低,y軸對(duì)應(yīng)左右方向
后續(xù)我們所說(shuō)的繞軸變化,你就可以參考這個(gè)圖例敛惊,想象一下發(fā)生的變換

三維坐標(biāo)系示意

接下來(lái)我們來(lái)看看transform支持的變換類型渊鞋,如果對(duì)此您有疑問(wèn)绰更,可以參考w3school的可測(cè)試教程

  1. 2D類型

    轉(zhuǎn)換(位移) translate(x,y) / translateX(x) / translateY(y)
    縮放 scale(x,y) / scaleX(x) / scaleY(y)
    旋轉(zhuǎn) rotate(angle) / rotateX(angle) / rotateY(angle)
    傾斜 skew(x-angle,y-angle) / skewX(angle) / skewY(angle)
    matrix()瞧挤,把所有 2D 變換方法組合為一個(gè),可接受六個(gè)參數(shù)儡湾,matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

  2. 3D類型

    轉(zhuǎn)換(位移) translate3d(x,y,z) / translateZ(z)特恬,主要是垂直距離的位移
    縮放 scale3d(x,y,z) / scaleZ(z),同樣是垂直距離的縮放
    旋轉(zhuǎn) rotate3d(x,y,z,angle) / rotateX(angle) / rotateY(angle) / rotateZ(angle)
    rotateX/rotateY/rotateZ三種函數(shù)分別意思是繞著XYZ軸做旋轉(zhuǎn)運(yùn)動(dòng)徐钠,angle參數(shù)為單位為deg的角度
    rotate3d函數(shù)定義一個(gè)變換癌刽,它將元素圍繞固定軸移動(dòng)而不使其變形,運(yùn)動(dòng)量由指定的角度定義尝丐,
    如果為正显拜,運(yùn)動(dòng)將為順時(shí)針,如果為負(fù)爹袁,則為逆時(shí)針远荠,想要了解更多可以參考 這篇文檔中的動(dòng)態(tài)示例 理解

2D變換請(qǐng)參考 本文Tips中的鏈接 或百度教程,下面我們來(lái)詳細(xì)看下實(shí)現(xiàn)靜態(tài)3D變換的代碼

    .stage {
        width: 100%;
        height: 100%;
        perspective: 500px;
        -webkit-perspective: 500px;
        perspective-origin: 50% 50%;
        -webkit-perspective-origin: 50% 50%;
    }
    
    .stage .box {
        width: 100px;
        height: 100px;
        margin: 100px 100px;
        background-color: #55ffff;
        display: inline-block;
        // 這里表示繞Y軸做旋轉(zhuǎn)65度的變換
        transform: rotate3d(0, 1, 0, 65deg);
        -webkit-transform: rotate3d(0, 1, 0, 65deg);
    }

轉(zhuǎn)換基點(diǎn)位置屬性(transform-origin)

  1. transform-origin屬性允許您改變被轉(zhuǎn)換元素的位置失息,2D轉(zhuǎn)換元素能夠改變?cè)豿y軸譬淳,3D轉(zhuǎn)換元素還能改變其z軸
  2. transform-origin: x-axis y-axis z-axis,這定義了視圖被置于xyz軸的何處盹兢,z值只能是length邻梆,xy可以分別是這些值:
    • left
    • right
    • center
    • length,像素
    • %绎秒,百分比
  3. transform-origin屬性必須和transform屬性一同使用
  4. 默認(rèn)值是50% 50% 0浦妄,表示轉(zhuǎn)換基點(diǎn)位于 xy 中心以及 z軸 0 的位置
  5. 下面我們利用一個(gè)示例來(lái)看看,你依舊可以通過(guò)修改demo中的參數(shù)见芹,看到效果的變化
    .stage {
        width: 100%;
        height: 100%;
        perspective: 500px;
        -webkit-perspective: 500px;
        perspective-origin: 50% 50%;
        -webkit-perspective-origin: 50% 50%;
    }
    
    .stage .box {
        width: 100px;
        height: 100px;
        margin: 100px 100px;
        background-color: #55ffff;
        display: inline-block;
        transform: rotate3d(0, 1, 0, 65deg);
        -webkit-transform: rotate3d(0, 1, 0, 65deg);
        // 表示旋轉(zhuǎn)元素的基準(zhǔn)點(diǎn)在 x 100px  y 100px  z -900px 位置
        // 值類型自由使用校辩,不做過(guò)多說(shuō)明,參考上方透視基點(diǎn)屬性
        transform-origin: 100px 100px -900px;
        -webkit-transform-origin: 100px 100px -900px;
    }

轉(zhuǎn)換如何呈現(xiàn)屬性(transform-style)

  1. transform-style屬性規(guī)定如何在3D空間中呈現(xiàn)被嵌套的元素
  2. transform-style: flat | preserve-3d辆童,flat表示子元素將不保留其3D位置宜咒,preserve-3d表示子元素保留其3D位置
  3. 默認(rèn)值是flat,不保留3D位置
  4. 下面用一個(gè)不同于上面幾個(gè)示例的示例來(lái)展示整個(gè)屬性的效果把鉴,你可以在demo中修改幾個(gè)屬性來(lái)查看效果
    <div class="stage">
        <div class="box">
            <div class="box-out">
                <div class="box-in"></div>
            </div>
        </div>
    </div>
    
    .stage {
        width: 100%;
        height: 100%;
        perspective: 1600px;
        -webkit-perspective: 1600px;
    }
    
    .stage .box {
        width: 400px;
        height: 400px;
        margin: 100px 100px;
        background-color: #55ffff;
        transform: rotate3d(0, 1, 0, 65deg);
        -webkit-transform: rotate3d(0, 1, 0, 65deg);
        // 這里會(huì)展示3D效果
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        // 不展示3D效果
        // transform-style: flat;
        // -webkit-transform-style: flat;
    }
    
    .stage .box .box-out {
        width: 90%;
        height: 90%;
        background-color: #ffff00;
        transform: rotate3d(0.5, 1, 0, 85deg);
        -webkit-transform: rotate3d(0.5, 1, 0, 85deg);
    }
    
    .stage .box .box-out .box-in {
        width: 150%;
        height: 150%;
        background-color: #aaff7f;
        transform: rotate3d(0.1, 1, 0.5, 85deg);
        -webkit-transform: rotate3d(0.1, 1, 0.5, 85deg);
    }

背面是否可見(jiàn)屬性(backface-visibility)

  1. backface-visibility屬性定義當(dāng)元素不面向屏幕時(shí)是否可見(jiàn)
  2. backface-visibility: visible | hidden故黑,visible表示背面是可見(jiàn)的儿咱,hidden表示背面不可見(jiàn)
  3. 該屬性主要用于不想展示被旋轉(zhuǎn)元素的背面時(shí)使用,通常用于一些翻轉(zhuǎn)動(dòng)效场晶,比如爐石的抽卡混埠,就屬于背面可見(jiàn)
  4. 下面我們可以通過(guò)翻拍效果示例來(lái)理解一下這個(gè)屬性的作用
    <div class="stage">
        <div class="box">
            <div class="box-prev"></div>
            <div class="box-next"></div>
        </div>
    </div>
    
    .stage {
        width: 100%;
        height: 100%;
        perspective: 1600px;
        -webkit-perspective: 1600px;
    }
    
    .box {
        width: 400px;
        height: 400px;
        margin: 100px 100px;
        position: relative;
        transition: 0.5s all;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
    }
    
    .box-prev, 
    .box-next {
        width: 100%;
        height: 100%;
        position: absolute;
        transition: 0.5s all;
        backface-visibility: hidden;
    }
    
    .box-prev {
        background-color: #ffff00;
        z-index: 1;
    }
    
    .box-next {
        background-color: #aaff7f;
        transform: rotateY(180deg);
        z-index: 0;
    }
    
    .box:hover{
        transform: rotateY(180deg);
    }

做一些簡(jiǎn)單的循環(huán)動(dòng)效

學(xué)習(xí)了上述代碼之后,我們可以做一些簡(jiǎn)單的循環(huán)動(dòng)效了诗轻,這里我們用一個(gè)簡(jiǎn)單的翻書效果來(lái)練習(xí)钳宪,當(dāng)然還有很多奇思妙想期待你自己去實(shí)踐啦!

    <div class="stage">
        <div class="box">
            <div class="box-prev"></div>
            <div class="box-midd"></div>
            <div class="box-next">
                <span></span>
                <span></span>
            </div>
        </div>
    </div>
    .stage {
        width: 100%;
        height: 100%;
    }
    
    .box {
        width: 400px;
        height: 400px;
        margin: 100px 100px;
        position: relative;
        transition: 0.5s all;
        transform-style: preserve-3d;
    }
    
    .box-prev,
    .box-midd,
    .box-next {
        width: 100%;
        height: 100%;
        position: absolute;
        transition: 3s all;
    }
    
    .box-prev {
        background-color: #ffff9b;
        z-index: 2;
    }
    
    .box-midd {
        background-color: #aaff7f;
        z-index: 1;
    }
    
    .box-next {
        display: flex;
        justify-content: space-between;
        z-index: 0;
    }
    
    .box-next span {
        width: 50%;
        height: 100%;
    }
        
    .box-next span:nth-child(1) {
        background-color: #ffff9b;
    }
        
    .box-next span:nth-child(2) {
        background-color: #aaff7f;
    }
    
    .box:hover .box-prev {
        transform: perspective(800px) rotateY(-180deg);
        transform-origin: perspective(800px) 50% 50% 0;
    }

    .box:hover .box-midd {
        transform: perspective(800px) rotateY(-180deg);
        transform-origin: perspective(800px) 50% 50% 0;
    }

參考文檔一 ———— 帶你玩轉(zhuǎn)css3的3D扳炬!
參考文檔二 ———— 好吧吏颖,CSS3 3D transform變換,不過(guò)如此恨樟!
參考文檔三 ———— CSS perspective 屬性
參考文檔三 ———— CSS perspective-origin 屬性
參考文檔五 ———— CSS transform 屬性
參考文檔六 ———— CSS transform-origin 屬性
參考文檔七 ———— CSS transform-style 屬性
參考文檔八 ———— CSS backface-visibility 屬性
參考文檔九 ———— CSS3中設(shè)置3D變形的transform-style屬性詳解

我是 fx67ll.com半醉,如果您發(fā)現(xiàn)本文有什么錯(cuò)誤,歡迎在評(píng)論區(qū)討論指正劝术,感謝您的閱讀缩多!
如果您喜歡這篇文章,歡迎訪問(wèn)我的 本文github倉(cāng)庫(kù)地址养晋,為我點(diǎn)一顆Star衬吆,Thanks~ :)
轉(zhuǎn)發(fā)請(qǐng)注明參考文章地址,非常感謝IQ仿铡!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末圈纺,一起剝皮案震驚了整個(gè)濱河市秦忿,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌蛾娶,老刑警劉巖灯谣,帶你破解...
    沈念sama閱讀 218,451評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異蛔琅,居然都是意外死亡胎许,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門罗售,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)辜窑,“玉大人,你說(shuō)我怎么就攤上這事寨躁∧滤椋” “怎么了?”我有些...
    開封第一講書人閱讀 164,782評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵职恳,是天一觀的道長(zhǎng)所禀。 經(jīng)常有香客問(wèn)我方面,道長(zhǎng),這世上最難降的妖魔是什么色徘? 我笑而不...
    開封第一講書人閱讀 58,709評(píng)論 1 294
  • 正文 為了忘掉前任恭金,我火速辦了婚禮,結(jié)果婚禮上褂策,老公的妹妹穿的比我還像新娘横腿。我一直安慰自己,他們只是感情好斤寂,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,733評(píng)論 6 392
  • 文/花漫 我一把揭開白布耿焊。 她就那樣靜靜地躺著,像睡著了一般扬蕊。 火紅的嫁衣襯著肌膚如雪搀别。 梳的紋絲不亂的頭發(fā)上丹擎,一...
    開封第一講書人閱讀 51,578評(píng)論 1 305
  • 那天尾抑,我揣著相機(jī)與錄音,去河邊找鬼蒂培。 笑死再愈,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的护戳。 我是一名探鬼主播翎冲,決...
    沈念sama閱讀 40,320評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼媳荒!你這毒婦竟也來(lái)了抗悍?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,241評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤钳枕,失蹤者是張志新(化名)和其女友劉穎缴渊,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體鱼炒,經(jīng)...
    沈念sama閱讀 45,686評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡衔沼,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,878評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了昔瞧。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片指蚁。...
    茶點(diǎn)故事閱讀 39,992評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖自晰,靈堂內(nèi)的尸體忽然破棺而出凝化,到底是詐尸還是另有隱情,我是刑警寧澤酬荞,帶...
    沈念sama閱讀 35,715評(píng)論 5 346
  • 正文 年R本政府宣布搓劫,位于F島的核電站劣光,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏糟把。R本人自食惡果不足惜绢涡,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,336評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望遣疯。 院中可真熱鬧雄可,春花似錦、人聲如沸缠犀。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,912評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)辨液。三九已至虐急,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間滔迈,已是汗流浹背止吁。 一陣腳步聲響...
    開封第一講書人閱讀 33,040評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留燎悍,地道東北人敬惦。 一個(gè)月前我還...
    沈念sama閱讀 48,173評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像谈山,于是被迫代替她去往敵國(guó)和親俄删。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,947評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容