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

資訊專欄INFORMATION COLUMN

圖解正方體旋轉(zhuǎn)的translate3D原理

yankeys / 2261人閱讀

摘要：如何寫出一個正方體效果視距初始位置旋轉(zhuǎn)一定的角度以便看到立體效果前面面對著你來講后面左面右面上面下面圖解旋轉(zhuǎn)原理

如何寫出一個正方體？ 

  
    
            
    • 
            
    • 
            
    • 
            
    • 
            
    • 
            
    • 




----------
 //3D 效果
  perspective: 2000px;//視距
  .box{
    width:5rem;
    height:5rem;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(45deg);//初始位置旋轉(zhuǎn)一定的角度以便看到立體效果
  
    li{
      &:nth-child(1){//前面 面對著你來講
        transform: translateZ(2.5rem);
      }
      &:nth-child(2){//后面
        transform: translateZ(-2.5rem) rotateY(180deg);
      }
      &:nth-child(3){//左面
        transform: translateX(-2.5rem) rotateY(-90deg);
      }
      &:nth-child(4){//右面
        transform: translateX(2.5rem) rotateY(90deg);
      }
      &:nth-child(5){//上面
        transform: translateY(-2.5rem) rotateX(90deg);
      }
      &:nth-child(6){//下面
        transform: translateY(2.5rem) rotateX(-90deg);
      }

    }
  }
圖解旋轉(zhuǎn)原理




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

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

相關文章

  • CSS中那些微妙模糊的屬性

    摘要：在前端開發(fā)中，我經(jīng)常碰到一些不能馬上理解的屬性，于是打算以后但凡碰到這些微妙又模糊的屬性，都歸納到這里。如圖看過有關相關博客收集在這里個人覺得第一篇最好立方體旋轉(zhuǎn)鼠標鍵盤可控旋轉(zhuǎn)方向理解與曖昧關系好吧，變換，不過如此的屬性 在前端開發(fā)中，我經(jīng)常碰到一些不能馬上理解的css屬性， 于是打算以后但凡碰到這些微妙又模糊的屬性，都歸納到這里。 CSS打印頁面中的 orphans和widows ...

    gotham 評論0 收藏0

  • CSS動畫之旋轉(zhuǎn)魔方輪播

    摘要：關于的詳細講解張鑫旭一個基本的立方體就需要結(jié)合以上三點屬性來實現(xiàn)。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學習方面的知識嘞本文參考內(nèi)容關于的詳細講解張鑫旭詳解徹底理解和的區(qū)別的原始出處 很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...

    leone 評論0 收藏0

  • CSS動畫之旋轉(zhuǎn)魔方輪播

    摘要：關于的詳細講解張鑫旭一個基本的立方體就需要結(jié)合以上三點屬性來實現(xiàn)。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學習方面的知識嘞本文參考內(nèi)容關于的詳細講解張鑫旭詳解徹底理解和的區(qū)別的原始出處 很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...

    LittleLiByte 評論0 收藏0

  • CSS 3D Panorama（全景） - 淘寶造物節(jié)技術剖析

    摘要：淘寶造物節(jié)的活動頁就是全景的一個很贊的頁面，它將全景圖分割成等份，相鄰的元素構(gòu)成的夾角，相鄰兩側(cè)面相對于棱柱中心所構(gòu)成的夾角。 本文轉(zhuǎn)自凹凸實驗室：https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鮮事物了，但以前...

    LiuRhoRamen 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<