前端提高篇(五十七)練習9 3d立方體旋轉

2021-10-25 19:17:28 字數 1324 閱讀 2585

6個面上標有數字1-6,數字和立方體各面的對應關係是:

前1 上2 後3 下4 左5 右6

.box

.item

.item:nth-child(1)

.item:nth-child(2)

.item:nth-child(3)

.item:nth-child(4)

.item:nth-child(5)

.item:nth-child(6)

@keyframes move

100%

}

class

=>

class

="box"

>

class

="item"

>

1div

>

class

="item"

>

2div

>

class

="item"

>

3div

>

class

="item"

>

4div

>

class

="item"

>

5div

>

class

="item"

>

6div

>

div>

div>

效果:

在給6個麵定位置時,要注意,是先旋轉哪乙個軸,再旋轉哪乙個軸

如數字』2』所在的面,是上面,要先旋轉x軸90deg,再沿z軸正方向平移100px

如果先沿z軸平移,再沿x軸旋轉

會先向螢幕這邊移動,然後在沿x軸翻,這樣最後的位置在原xoz面上

(座標軸原點設為o點,最終狀態是:躺平在原座標軸系統的xoz面上,類似乙個小人,往螢幕跑了100px,然後就地躺),

這樣的位置是不滿足原先設定的立方體面與數字的對應的,且高度直接縮小了一半

然後就是之前沒有講的transform: rotate3d(x,y,z,ndeg);,指的是沿xyz合力方向旋轉ndeg

案例中xyz均設為1,合成的向量方向大概是:

Vue練習五十七 07 02

太多使用了 refs來直接操作dom,有待更正 需求 1 滑鼠移至 離開左側 右側,顯示 隱藏向左 向右切換按鈕 2 載入時新增loading.gif,載入完成後消失 根據網速 4 向左 向右切換至第一張 最末一張後,再次點選,彈出提示無更多 解析 1 html結構 1個大的div id為big 包...

誅天者 pat basic 練習五十七 數零壹

給定一串長度不超過 10 5 的字串,本題要求你將其中所有英文本母的序號 字母 a z 對應序號 1 26,不分大小寫 相加,得到整數 n,然後再分析一下 n 的二進位制表示中有多少 0 多少 1。例如給定字串pat basic 其字母序號之和為 16 1 20 2 1 19 9 3 71,而 71...

前端提高篇(五)練習2 數字轉二進位制

1.正整數轉為二進位制 取餘,倒序 2.小數轉為二進位制 乘2取整,正序 如 0.2 0.2 x 2 0.4 0 0.4 x 2 0.8 0 0.8 x 2 1.6 1 0.6 x 2 1.2 1 0.2 x 2 0.4 0 後面是無限迴圈,取前面一部分 所以0.2轉為二進位制是 0.0011001...