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

yankeys 發(fā)布于2019-08-30 13:54 / 2257人閱讀

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

如何寫出一個(gè)正方體？

  
            
            
            
            
            
            



----------
 //3D 效果
  perspective: 2000px;//視距
  .box{
    width:5rem;
    height:5rem;
    transform-style: preserve-3d;
    transform: rotateX(-30deg) rotateY(45deg);//初始位置旋轉(zhuǎn)一定的角度以便看到立體效果
  
    li{
      &:nth-child(1){//前面 面對(duì)著你來(lái)講
        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)原理

GPU云服務(wù)器云服務(wù)器正方體旋轉(zhuǎn) html 旋轉(zhuǎn)立方體 js控制立方體旋轉(zhuǎn) js鼠標(biāo)拖動(dòng)3D立方體旋轉(zhuǎn)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115628.html

相關(guān)文章

CSS中那些微妙模糊的屬性

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

gotham 2019-08-28 18:20 評(píng)論0 收藏0
CSS動(dòng)畫之旋轉(zhuǎn)魔方輪播

摘要：關(guān)于的詳細(xì)講解張?chǎng)涡褚粋€(gè)基本的立方體就需要結(jié)合以上三點(diǎn)屬性來(lái)實(shí)現(xiàn)。寫完這篇文章后確實(shí)感覺自己對(duì)方面的知識(shí)又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學(xué)習(xí)方面的知識(shí)嘞本文參考內(nèi)容關(guān)于的詳細(xì)講解張?chǎng)涡裨斀鈴氐桌斫夂偷膮^(qū)別的原始出處很久沒有回頭來(lái)復(fù)習(xí)CSS方面的知識(shí)了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細(xì)鞏固一下CSS3動(dòng)畫有關(guān)的知識(shí)點(diǎn),因?yàn)橹爸皇怯眠^(guò)...

leone 2019-08-29 15:10 評(píng)論0 收藏0
CSS動(dòng)畫之旋轉(zhuǎn)魔方輪播

摘要：關(guān)于的詳細(xì)講解張?chǎng)涡褚粋€(gè)基本的立方體就需要結(jié)合以上三點(diǎn)屬性來(lái)實(shí)現(xiàn)。寫完這篇文章后確實(shí)感覺自己對(duì)方面的知識(shí)又熟悉了不少但是前端的主力還是月份又得繼續(xù)深入學(xué)習(xí)方面的知識(shí)嘞本文參考內(nèi)容關(guān)于的詳細(xì)講解張?chǎng)涡裨斀鈴氐桌斫夂偷膮^(qū)別的原始出處很久沒有回頭來(lái)復(fù)習(xí)CSS方面的知識(shí)了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細(xì)鞏固一下CSS3動(dòng)畫有關(guān)的知識(shí)點(diǎn),因?yàn)橹爸皇怯眠^(guò)...

LittleLiByte 2019-08-02 10:18 評(píng)論0 收藏0
CSS 3D Panorama（全景） - 淘寶造物節(jié)技術(shù)剖析

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

LiuRhoRamen 2019-08-29 11:16 評(píng)論0 收藏0