国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

圖解正方體旋轉的translate3D原理

yankeys / 2247人閱讀

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

如何寫出一個正方體？ 

  
    
            
    • 
            
    • 
            
    • 
            
    • 
            
    • 
            
    • 




----------
 //3D 效果
  perspective: 2000px;//視距
  .box{
    width:5rem;
    height:5rem;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(45deg);//初始位置旋轉一定的角度以便看到立體效果
  
    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);
      }

    }
  }
圖解旋轉原理




文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115628.html

相關文章

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

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

    gotham 評論0 收藏0

  • CSS動畫之旋轉魔方輪播

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

    leone 評論0 收藏0

  • CSS動畫之旋轉魔方輪播

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

    LittleLiByte 評論0 收藏0

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

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

    LiuRhoRamen 評論0 收藏0

發表評論

0條評論

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