這個旋轉的魔方我們必須先創建一個舞臺，并且寫上屬性：

transform-style: preserve-3d;

1.屬性perspective

這是景深，就是一個定義舞臺和屏幕之間距離的屬性

?

2.關于transform屬性主要就是配合兩個屬性使用：

rotate()和translate()屬性，一個是定義旋轉的方向和角度，另一個是移動的方向，都是配合xyz三個軸實現

?

3.柵欄布局display:grid

就是可以在一個容器里面創建這樣的額柵欄布局，比如我們在一個div里面創建一個兩行三列的布局：

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

這個表示三列，每列的寬度是105px

grid-template-rows:85px 85px;

這個表示兩行，每行寬度是85px

grid-gap: 1.5rem;

這個是每行每列之間的空隙是1.5rem，可以兩個參數，一個是行距一個是列距

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

justify-content: center;

?

4.classList

表示一個標簽的類名列表，基本的使用可以見classList

?

5.target?事件屬性

javascript中可以在綁定事件(addEventListener)的時候使用event.target來返回發生事件的元素

?

6.transition屬性

可以說是補間動畫

使用：

transition:?property duration timing-function delay;

值描述

transition-property	指定CSS屬性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的轉速曲線
transition-delay	定義transition效果開始的時候

我們魔方相冊里面我們把property 設置成transform：

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

這樣就是所有的旋轉效果都可以實現動畫效果了

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。