這個(gè)旋轉(zhuǎn)的魔方我們必須先創(chuàng)建一個(gè)舞臺(tái)，并且寫上屬性：

transform-style: preserve-3d;

1.屬性perspective

這是景深，就是一個(gè)定義舞臺(tái)和屏幕之間距離的屬性

?

2.關(guān)于transform屬性主要就是配合兩個(gè)屬性使用：

rotate()和translate()屬性，一個(gè)是定義旋轉(zhuǎn)的方向和角度，另一個(gè)是移動(dòng)的方向，都是配合x(chóng)yz三個(gè)軸實(shí)現(xiàn)

?

3.柵欄布局display:grid

就是可以在一個(gè)容器里面創(chuàng)建這樣的額柵欄布局，比如我們?cè)谝粋€(gè)div里面創(chuàng)建一個(gè)兩行三列的布局：

grid-template-columns: 105px 105px 105px;

這個(gè)表示三列，每列的寬度是105px

grid-template-rows:85px 85px;

這個(gè)表示兩行，每行寬度是85px

grid-gap: 1.5rem;

這個(gè)是每行每列之間的空隙是1.5rem，可以兩個(gè)參數(shù)，一個(gè)是行距一個(gè)是列距

這個(gè)盒子可以利用彈性布局的居中：

justify-content: center;

?

4.classList

表示一個(gè)標(biāo)簽的類名列表，基本的使用可以見(jiàn)classList

?

5.target?事件屬性

javascript中可以在綁定事件(addEventListener)的時(shí)候使用event.target來(lái)返回發(fā)生事件的元素

?

6.transition屬性

可以說(shuō)是補(bǔ)間動(dòng)畫

使用：

transition:?property duration timing-function delay;

值描述

transition-property	指定CSS屬性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的轉(zhuǎn)速曲線
transition-delay	定義transition效果開(kāi)始的時(shí)候

我們魔方相冊(cè)里面我們把property 設(shè)置成transform：

transition: transform 3s cubic-bezier(0.165, 0.84, 0.44, 1);

這樣就是所有的旋轉(zhuǎn)效果都可以實(shí)現(xiàn)動(dòng)畫效果了

總結(jié)

以上是生活随笔為你收集整理的魔方照片墙总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。