實現-魔方照片墻

思路步驟：

1.圖片準備：尋找你要實現的照片——6張

2.html代碼：

<div class="wrapper"><img src="source/pic1.jpeg" alt=""><img src="source/pic2.jpeg" alt=""><img src="source/pic3.jpeg" alt=""><img src="source/pic4.jpeg" alt=""><img src="source/pic5.jpeg" alt=""><img src="source/pic6.jpeg" alt=""> </div>

說明：用一個大的div容器包裹住6張圖片，這樣的好處是：可以繼承父級的屬性

3.接下來是CSS部分的實現說明：

? 1）景深效果的實現，離不開perspective：相應的像素和 transform-style: preserve-3d;

? perspective：景深的距離；可以使得其子元素會獲得透視效果，立體感。本次內容的關鍵屬性

? transform-style: preserve-3d; 3D空間一個重要屬性，指定嵌套元素如何在3D空間中呈現。

? 2)兩個屬性，二選其一即可。一旦使用以上屬性，body就成為了定位參照物元素，雖然它身上沒有position: relative,但它依然可以成為參照物。子元素沒有高度，需要它傳承高度

:root{height: 100%;} body{perspective: 3000px;transform-style: preserve-3d;height: 100%;}

? 3）父級的CSS設置，可以用CSS3的屬性實現居中：

.wrapper{position: absolute;width: 300px;height: 300px;left: calc(50%);top: calc(50%);transform: translate(-50%, -50%);}

? 4)接下來是img旋轉角度的部分：這里我選擇先用水平的4個面，即前后左右，讓rotateY沿著y軸旋轉90°，再用translateZ沿著Z軸旋轉相應的度數，如果在body沒有設置perspective，則看不到效果。注意，這里的度數可根據自己圖片進行調節(jié)。

說明：在transform中先旋轉后平移、先平移后旋轉的效果是不一樣的

? 5）最后是關鍵幀動畫的設置。只需設置from和to兩個起始和結束的狀態(tài)，在animation里面設置動畫的時長

animation: move 10s linear infinite;

4.完整代碼的實現

html代碼

<div class="wrapper"><img src="source/pic1.jpeg" alt=""><img src="source/pic2.jpeg" alt=""><img src="source/pic3.jpeg" alt=""><img src="source/pic4.jpeg" alt=""><img src="source/pic5.jpeg" alt=""><img src="source/pic6.jpeg" alt=""></div>

CSS代碼

<style>@keyframes move {form{transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg);}to{transform: translate(-50%, -50%) rotateY(360deg) rotateY(360deg);}}:root,html{height: 100%;}body{perspective: 3000px;transform-style: preserve-3d;height: 100%;}.wrapper{position: absolute;width: 300px;height: 300px;left: calc(50%);top: calc(50%);transform: translate(-50%, -50%);transform-style: preserve-3d;animation: move 10s linear infinite;}img:nth-of-type(1),img:nth-of-type(2),img:nth-of-type(3),img:nth-of-type(4),img:nth-of-type(5),img:nth-of-type(6) {position: absolute;/* left: 50%;top: 50%; */width: 100%;height: 100%;opacity: 0.6;}img:nth-of-type(1) {background-color: red;transform: translateZ(150px) ;}img:nth-of-type(2) {background-color: red;transform:rotateY(90deg) translateZ(150px);}img:nth-of-type(3) {background-color: red;transform:rotateY(180deg) translateZ(150px) ;}img:nth-of-type(4) {background-color: red;transform: rotateY(270deg) translateZ(150px);}img:nth-of-type(5) {background-color: red;transform: rotateX(90deg) translateZ(150px);}img:nth-of-type(6){background-color: red;transform:rotateX(270deg) translateZ(150px) ;}</style>

總結

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

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