成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css3 做一個(gè)類似于翻書特效的3D動(dòng)畫

jiekechoo / 455人閱讀

摘要：我們來看下做一個(gè)動(dòng)畫需要哪些東西。說明各個(gè)屬性的作用代表物體距離瀏覽器是。下面我們做一個(gè)向下翻頁(yè)的數(shù)字，和一個(gè)向做翻頁(yè)的數(shù)字。

我們來看下做一個(gè)css3 3D動(dòng)畫需要哪些東西。前面我們已經(jīng)使用transition和transform做了一些簡(jiǎn)單的操作。

設(shè)置3D場(chǎng)景

做3D動(dòng)畫，我們首先要設(shè)置3D場(chǎng)景。3D場(chǎng)景我們通常用perspective和perspective-origin兩個(gè)屬性設(shè)定。

說明各個(gè)屬性的作用：
perspective:800;代表3D物體距離瀏覽器是800px。
perspective-origin:50% 50%;眼睛視角的中心點(diǎn)，分別在xy軸的50%的地方。
設(shè)置了這兩個(gè)屬性之后，瀏覽器中的物體已經(jīng)變成三維物體。這個(gè)時(shí)候我們就可以做3D動(dòng)畫了。

transform 3D操作

transform既可以做3D操作也可以做2D操作，為了區(qū)分是3D還是2D，我們需要加個(gè)樣式屬性。加了這個(gè)樣式之后，就代表在動(dòng)畫中我們要做3D操作。

-webkit-transform-style:-webkit-preserve-3d;

我們用圖片表示在三維世界里xyz軸的方向（x軸是向右的，y軸是向下的，z軸的方向相當(dāng)于從屏幕指向我們的）。

下面我們做一個(gè)向下翻頁(yè)的數(shù)字，和一個(gè)向做翻頁(yè)的數(shù)字。

做一個(gè)向下翻頁(yè)的動(dòng)畫 



  
    
    
    
  
  
    

      

        
1

        
2

        
3

        
4

        
5

        
6
做一個(gè)向左翻頁(yè)的動(dòng)畫——類似于翻書的特效 


  
    
    
    
  
  
    

      

        
1

        
2

        
3

        
4

        
5

        
6

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113914.html

相關(guān)文章

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

    摘要：層疊即表示允許以多種方式來描述樣式，一個(gè)元素可以被渲染呈現(xiàn)出多種樣式?？梢宰寣傩缘淖兓^程持續(xù)一段時(shí)間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用后，將按一個(gè)曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

    elliott_hu 評(píng)論0 收藏0

  • 可能是最全的前端動(dòng)效庫(kù)匯總

    摘要：非常的龐大，而且它是完全為設(shè)計(jì)而生的動(dòng)效庫(kù)。它運(yùn)行于純粹的之上，是目前最強(qiáng)健的動(dòng)畫資源庫(kù)之一?？赡苁莿?chuàng)建滾動(dòng)特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性?？梢酝ㄟ^安裝吊炸天了，接近現(xiàn)實(shí)生活中的物理運(yùn)動(dòng)碰撞慣性動(dòng)畫庫(kù)。 收集日期為2019-02-28，★代表當(dāng)時(shí)的該項(xiàng)目在github的star數(shù)量 Animate.css 56401 ★ 一個(gè)跨瀏覽器的動(dòng)效基礎(chǔ)庫(kù)，是許多基礎(chǔ)動(dòng)...

    afishhhhh 評(píng)論0 收藏0

  • 也許vue+css3做交互特效更簡(jiǎn)單

    摘要：前言做項(xiàng)目就難免會(huì)開發(fā)交互效果或者特效，而我最近開發(fā)的項(xiàng)目一直在使用，開發(fā)技術(shù)棧方面，理所當(dāng)然就使用了開發(fā)，過程中發(fā)現(xiàn)使用開發(fā)特效，和的思維方式不一樣，但是比簡(jiǎn)單一點(diǎn)點(diǎn)。 1.前言 做項(xiàng)目就難免會(huì)開發(fā)交互效果或者特效，而我最近開發(fā)的項(xiàng)目一直在使用vue，開發(fā)技術(shù)棧方面，理所當(dāng)然就使用了vue+css3開發(fā)，過程中發(fā)現(xiàn)使用vue+css3開發(fā)特效，和javascript/jquery+c...

    geekzhou 評(píng)論0 收藏0

  • 也許vue+css3做交互特效更簡(jiǎn)單

    摘要：前言做項(xiàng)目就難免會(huì)開發(fā)交互效果或者特效，而我最近開發(fā)的項(xiàng)目一直在使用，開發(fā)技術(shù)棧方面，理所當(dāng)然就使用了開發(fā)，過程中發(fā)現(xiàn)使用開發(fā)特效，和的思維方式不一樣，但是比簡(jiǎn)單一點(diǎn)點(diǎn)。 1.前言 做項(xiàng)目就難免會(huì)開發(fā)交互效果或者特效，而我最近開發(fā)的項(xiàng)目一直在使用vue，開發(fā)技術(shù)棧方面，理所當(dāng)然就使用了vue+css3開發(fā)，過程中發(fā)現(xiàn)使用vue+css3開發(fā)特效，和javascript/jquery+c...

    ISherry 評(píng)論0 收藏0

  • CSS3熱身實(shí)戰(zhàn)--過渡與動(dòng)畫（實(shí)現(xiàn)炫酷下拉，手風(fēng)琴，無縫滾動(dòng)）

    摘要：規(guī)定動(dòng)畫的時(shí)長(zhǎng)。注意子菜單要用隱藏，在顯示的時(shí)候再設(shè)置。如果不加，實(shí)際上子菜單，以及子菜單下面的一直在頁(yè)面上，如果鼠標(biāo)移上去子菜單，以及子菜單下面的。 1.前言 在自己的專欄上寫了十幾篇文章了，都是與js有關(guān)的。暫時(shí)還沒有寫過關(guān)于css3的文章。css3，給我的感覺就是，不難，但是很難玩轉(zhuǎn)自如。今天，就用css3來實(shí)現(xiàn)三個(gè)特效，希望這三個(gè)特殊能讓大家受到啟發(fā)，利用css3做出更好，更炫...

    zqhxuyuan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<